涡 生 清华 社 “ 视 频 大 讲 尝 ” 大 系 ， 
网 络 开 发 视频 大 讲堂 


节 高 清 微 视频 + 6 项 拓展 微 阅读 + 310 个 在 线 微 练习 
移动 端 /PC 端 同步 学 习 ，QQ 群 / 微 信和 群 随时 答疑 。 


个 实例 案例 分 析 +249 项 实例 源 代码 
高 效 、 实 用 ， 增 强 实战 能 力 。 


个 前 端 案 例 + 48 本 参考 手册 
先 观摩 ， 再 临摹 ， 高 手 案头 常备 ， 随 时 查阅 提升 。 


9: 
© 
3 


套 网 页 模板 + 12000 个 设计 素材 + 1036 道 前 端面 试 真题 
随 用 随 取 ， 提 升 设计 效率 ， 快 速 进 阶 开发 高 手 行列 。 


CSS3 
网 页 设计 


从 入 中 到 入 通 本 于 


前 端 科技 QO 编 车 
线 上 资源 ， 方 便 快捷 海量 资源 ， 可 查 可 用 
@ 教 学 微 视频 ( 258 节 ) @ 前 端 案 例 资源 库 ( 4900 个 ) 
@ 拓 展 微 阅读 ( 6 项 ) @ 面 试题 库 ( 1036 道 ) 
@ 在 线 微 练习 ( 310 个 ) @ 网 页 模板 库 ( 1500 套 ) 
全 权威 参考 (21 个 ) @ 设 计 素 材 库 ( 12000 个 ) 


清华 大 学 出 版 社 


9 清华 社 “ 视 频 大 讲堂 ”大 系 | 
络 开 友 知 频 大 十 皇 


CSS3 网 页 设计 从 入 门 到 精通 
( 微 课 精 编 版 ) 


前 端 科技 “编著 


内 容 简 介 


《CSS3 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 )》 从 初学 者 角度 出 发 ， 通 过 通俗 易 懂 的 语言 、 丰 富 多 彩 的 实 
例 ， 系 统 讲解 了 CSS3 基础 理论 和 实际 运用 技术 。 全 书 共 18 章 ， 包 括 CSS3 基础 、CSS3 选择 器 、 使 用 CSS3 美 
化 文本 和 图 像 、 使 用 CSS3 设计 特效 文本 、 使 用 CSS 设计 背景 样式 、 使 用 CSS3 美化 列表 和 超 链接 样式 、 使 用 
CSS 美化 表格 、 使 用 CSS 美化 表单 、CSS 盒 模 型 、 使 用 CSS 布局 网 页 、CSS3 伸缩 盒 布 局 、 设 计 CSS3 用 户 界 面 
样式 、 设 计 CSS3 动画 、 使 用 CSS3 媒体 查询 、 使 用 JavaScript 控制 CSS 样式 、 使 用 CSS 设计 XML 文档 样式 、 
设计 响应 式 网 站 、 设 计 酒 店 预订 微 信 wap 网 站 等 内 容 。 本 书 各 章节 注重 实例 间 的 联系 和 各 功能 间 的 难 易 层次 ， 
内 容 讲解 以 文字 描述 和 图 例 并 重 ， 力 求生 动易 懂 ， 并 对 软件 应 用 过 程 中 的 难点 、 重 点 和 可 能 出 现 的 问题 给 予 详 细 
讲解 和 提示 。 

除 纸 质 内 容 外 ， 本 书 还 配备 了 多 样 化、 全 方位 的 学 习 资源 ， 主 要 内 容 如 下 。 


名 ”258 节 同 步 教学 微 视频 思 15000 项 设计 素材 资源 
加 ”6 项 拓展 知识 微 阅 读 名 ”4800 个 前 端 开发 案例 
加 ”378 个 实例 案例 分 析 名 ”48 本 权威 参考 学 习 手册 
名 ”310 个 在 线 微 练习 名 ”1036 道 企 业 面试 真题 


本 书 语言 通俗 易 懂 ， 突 出 实用 性 ， 案 例 丰 晤 ， 结 构 清晰 ， 图 文 并 成 。 本 书 可 以 作为 网 页 设计 与 制作 人 员 、 商 
业 网 站 建设 与 开发 人 员 的 上 自学 用 书 ， 也 可 作为 高 等 院 校 及 相关 培训 机 构 的 教学 参考 用 书 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防 伪 标 签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数据 


CSS3 网 页 设计 从 入 门 到 精通 : 微 读 精 编 版 /前 端 科技 编著 . 一 北京 : 清华 大 学 出 版 社 ，2019 
(清华 社 “ 视 频 大 讲堂” 大 系 网 络 开发 视频 大 讲堂 ) 
ISBN 978-7-302-52249-2 


IT (DC…” 开 ，G 前 … [HI[， 网 页 制作 工具 IV. (CDTP393. 092. 2 
中 国 版 本 图 书馆 CIP 数据 核 字 (2019) 第 018393 与 


责任 编辑 : 机 小 红 
封面 设计 : 李 志 伟 
版 式 设 计 : 魏 远 
责任 校对 : 马子 杰 
责任 印 制 : 沈 器 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www. tup. com. cn, http://www.wqbook. com 
地 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮 编 : 100084 
社 总 机 : 010-62770175 邮 ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969，c-service@tup. tsinghua. edu. cn 
质量 反馈 : 010-62772015,， zhiliang@tup. tsinghua. edu. cn 


印 装 者 : 三 河 市 铭 诚 印 务 有 限 公 司 

经 销 : 全 国 新 华 书店 

开 ”本 : 203mmX 260mm 印 张 : 30.5 字 ” 数 : 922 千 字 

版 ”次 : 2019 年 4 月 第 1 版 印 次 : 2019 年 4 月 第 1 次 印刷 
定 介 : 89. 80 元 

产品 编号 : 079160-01 


如 何 使 用 本 书 


本 书 提供 了 多 样 化 、 全 方位 的 学 习 资源 ， 帮 助 读者 轻松 掌握 CSS3 网 页 设计 技术 ， 从 小 白 快速 成 
长 为 前 端 开 发 高 手 。 


视频 讲解 拓展 学 习 在 线 练习 
手机 端 +PC 端 ， 线 上 线 下 同步 学 习 


1. 获取 学 习 权限 


学 习 本 书 前 ， 请 先 刮 开 图 书 封底 的 二 维 码 涂 层 ， 使 用 手机 扫描 ， 即 可 获取 本 书 资源 的 学 习 权限 。 
再 扫描 正文 章节 对 应 的 4 类 二 维 码 ， 可 以 观看 视频 讲解 阅读 线 上 资源 ， 查 阅 权威 参考 资料 和 在 线 练 
习 提升 ， 全 程 易 懂 、 好 学 、 速 查 、 高 效 、 实 用 。 


刮 开 涂 层 ,扫描 获取 学 习 权 限 


扫 我 有 惊喜 


2. 观看 视频 讲解 


对 于 初学 者 来 说 ,精彩 的 知识 讲解 和 透彻 的 实例 解析 能 够 引导 其 快速 入 门 ， 轻松 理解 和 掌握 知识 
要 点 。 本 书 中 几乎 所 有 案例 都 录制 了 视频 ， 可 以 使 用 手机 在 线 观看 ， 也 可 以 离线 观看 ， 还 可 以 推送 到 
计算 机 上 大 屏幕 观看 。 


| f | 手 分 | 访 计 天 HH 视 加 | 全 有 下 Hale Yorla (tnble) 
Kidoctype henl> BR 
ang="gb2312"> 
8 


<div class="bl"> 
<div class="content bz"> 以 下 代码 是 我 的 第 一 个 
， 读 而 面 红色 居中 显示 字符 申 selle warld!。 


下 载 视频 至 手机 ， 推送 视频 至 邮箱 ， 
离线 流畅 观看 随时 PC 端 观 看 


Csss 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


3. 拓展 线 上 阅读 

一 本 书 的 厚度 有 限 , 但 掌握 一 门 技 术 却 需要 大 量 的 知识 积累 。 本 书 选 择 了 那些 与 学 习 、 就 业 关 系 
紧密 的 核心 知识 点 印 在 书 中 ， 而 将 大 量 的 拓展 性 知识 放 在 云 鼻 上 ， 读 者 扫描 “ 线 上 阅读 ”二 维 码 ， 即 
可 免费 阅读 数 百 页 的 前 端 开 发 学 习 资 料 ， 获 取 大 量 的 额外 知识 。 


ses00 中 国 移动 全 14:54 


se00 中 辐 移动 会 14:53 
xX 在 线 阅读 “. xX 在 线 阅 读 


{ 《Style type="text/css 
0 


和 242X [a - 
前 端 开发 1 一 7 Se 9 - ,本 3 
ard 入 约 ! 刘 | 1 关 ' 网 人 


font:24px “ 
font-fanily ipes 


| 收藏 到 邮箱 ] | 手机 国 桌 面 | 
[提示 


使 用 font 属 性 也 可 以 定义 字体 类 型 。 font 
是 一 个 复合 属性 ， 所 谓 复合 属性 ， 该 属性 能 衬 线 字体 - serif 
够 设置 多 种 字体 属性 ， 用 法 如 下 : 
font : font-style I| font-variant I| font-weig 无 衬 线 字体 - sans-serif 
ht || font-size || line-height || font-family 
font : caption | icon | menu | message-b 等 宽 字 体 - monospace 
ox | small-caption | status-bar 
属性 值 之 间 以 空格 分 喇 。font 属 性 至 少 应 
设置 字体 大 小 和 字体 类 型 ， 且 必须 放 在 后 面 
， 否 则 无 效 。 前 面 可 以 自由 定义 字体 样式 、 图 10.2 三 种 通用 字体 比较 效果 


《 


4. 进行 线 上 练习 
为 方便 读者 巩固 基础 知识 ， 提 升 实战 能 力 ， 本 书 附 赠 了 大 量 的 前 端 练习 题目 。 读 者 扫描 最 后 一 节 
的 “在 线 练习 ”二 维 码 ， 即 可 通过 反复 的 实 操 训 练 加 深 对 知识 的 领悟 程度 。 


sss00 中 国 移动 全 14:57 Bo 83% mn 


X 用 纯 CSS3 绘 制 26 个 : 


这 个 曙 汽 昌 你 用 者 虽 的 25 个 号 站 的 英文 子 母 并 不 是 理 沽 的 闻 
条 ， 它们 是 / 制 出 来 的 、 鲍 cs5 修 大 ， 了 用 


ss00 中 国 称 动 全 
xX 


ar 


包括 CSS3 选 择 器 相关 的 知识 ， 以 及 相 
学 习 + 模 仿 + 练 习 ， es 


打造 超 强 实战 能 力 


伪 对 象 选择 器 主要 针对 不 确定 对 象 定 
义 样 式 ， 如 第 一 行文 本 、 第 一 个 字符 、 前 
面 内 容 、 后 面 内 容 。 这 些 对 象 具体 存在 ， 
但 又 无 法 具体 确定 ， 需 要 使 用 特定 类 型 的 
选择 器 来 匹配 它们 。 


| 详细 阅读 


5. 查阅 权威 参考 资料 
扫描 “权威 参考 ”二 维 码 ， 即 可 跳 转 到 对 应 知识 的 官方 文 要 上 。 通 过 大 量 查 岗 ， 真 正 领悟 技术 内 涵 。 


ssee09 中 国 移动 令 15:02 EG vo 33% mm 


CSS Snapshot 2018 


This version: 
https://www.w3.org/T R/2019/ 
NOTE-css-2018-20190122/ 

Latest published version: 
https://www.w3.org/T R/css- 
2018/ 

Editors Draft: 
https://drafts.csswg.org/css- 
2018/ 

Previous Versions: 
https://www.w3.org/T R/2018/ 
NOTE-css-2018-20181115/ 

Editors: 

Tab Atkins Jr. (Google) 

Elika J. Etemad / fantasai 
(Invited Expert) 

Florian Rivoal (Invited Expert) 


Suggest an Edit for this Spec: 
GitHub Editor 


一 > Issue Tracking; 


6. 其 他 PC 端 资 源 下 载 方式 


除了 前 面 介 绍 过 的 可 以 直接 将 视频 、 拓 展 阅读 等 资源 推送 到 邮箱 之 外 ， 还 提供 了 如 下 几 种 PC 端 


资源 获取 方式 。 


登录 清华 大 学 出 版 社 官方 网 站 (www.tup.com.cn)， 在 对 应 图 书页 面 下 查找 资源 的 下 载 方式 。 


加 ”申请 加 入 QQ 群 、 微 信和 群 ， 获 得 资源 的 下 载 方式 。 


贸 ”扫描 图 书 封底 “ 文 果 云 


小 自学 习 电子 书 


为 方便 读者 全 面 提升 ， 本 书 赠送 了 “前 端 开发 白 问 白 答 ”小 日 学 习 电子 书 。 


”二 维 码 ， 获 得 资源 的 下 载 方 式 。 


希望 成 为 您 学 习 路 上 的 好 帮手 ， 关 键 时 刻 解 您 所 需 。 


扫描 小 白手 册封 面 的 二 维 码 ， 可 在 手机 、 


前 闯 开 发 百 问 百 答 


LE 99 所 工 机 几 站 天 3 


ey heen 多 村 


宛 击 溢 人 ?三 和 而 JR 号 坟 久 rote 人 有 列 让 为 一 厅 ， 素 简 忆 且 训 为 一 三 - 
系 区 有 轧 re B. eg cc 释 全 -天 习 云 全 阳 四 页 


各， 汪 雁 可 中 去 小 应 看 多 名 会 改 念 
1 利 呈 起 矶 时 更 各 基 生 舍 直 从 ， 贷 爱 下 守 几 修罗 往外 委 为 名 天 了 和 9 明 委 的 天 各 效 号 ， 


ee, 
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习 13 这 人 和 


Ee 
名 疗 各 二 三 生 全 县 写 有 一 个 印 宇 ， ei eb 和 锯 兰 
大 ， 同 刀 马 上 上、 三 ， 低 坟 六 需 二 与 本 和 入 可 


吉村 
RE ;区 之 三 号 毛 充 详 祝 上 os 企 旦 嘉 民 二 工 ， 英 二 个 二 二 正 总 吧 友 刻 关 区 工 呈 二 0 下 rr 
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如何 使 用 本 书 
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CSS Snapshot 2018 


The following modules are 
widely deployed with rough 
interoperability, but the details 
are not fully worked out and 
they need more testing and 
bugfixing. 


CSS Transitions Level 1 [CS 
S3-TRANSITIONS] and CSS 
Animations Level 1 [CSS3-A 


NIMATIONS], together with [ 
CSS-EASING-1]. 


Define mechanisms for 
transitioning the computed 
values of CSS properties 
Over time. 


CSS Grid Layout Module 
Level 1 [CSS-GRID-1] 


Defines a two-dimensional 
grid-based layout system, 
optimized for user 
interface design. In the 


平板 上 学 习 小 白手 册 内 容 。 


a 
ES pp 浊 下 各 号 全 全 六 的 一 

科举 人 和 义 党 吝 瑟 全 也 之 也 扣 入 禾 六 天时 了 dem 和 沪 及 
全 立 习 的 宇 用 ， 畦 二 poe 人 人生 次 恒 首要 二 父 元 呈 < 和 > 你 本 罗 回 手 全 信友 尼 习 这 芒 中 六 与 文 
字 月 厄 与 衬 抱 二 司 荆 了 下 安 ,让 言 考 己 贡 三 同 ， 部 疙 凑 质 ， 安 万 访 二 asds (gr 反之 必 ir 村 于 方 守 革 
司 下 个 为 信 而 必 各 2 三 

生 吉 定义 酸 2 对 但 ， 力 三 司 呆 画 亲 对 是 全 站 开关 于。 大 
区 要 入 了 区 天 改 因 六 击 利 儿 人 学生 ， 便 刁 迷 和 国生 入 各 对 安 全 a 文 击 宇 二 
本 bd 
、 娼 区 实 下 富 EDL pm 作风 C 沪 会 仙 当 六 pbhz 六 了 这 汪 亿 周 人 4 不 元 入 号 筑 答 而 ， 


pp 和 bape 和 居 望 - 正安 。 丙 实习 仿 国 如 总 寺 欠 
des 已 芝 分 天 肛 e 六 全 六 名 ,其 全 司 副 ， 


这 些 内 容 精 挑 细 选 ， 
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0 (sss 四 页 设 计 从 入 门 到 精通 ( 稚 课 精 纺 版 ) 


从 小 白 到 高 手 的 赔 变 


谷歌 的 创始 人 拉 里 。 佩 奇 说 过 ， 如 果 你 刻意 练习 某 件 事 超 过 10000 个 小 时 ， 那么 你 就 可 以 达到 世 


， 界 级 。 


因此 ， 不 管 您 现在 是 怎样 的 前 端 开 发 小 白 ， 只 要 您 按 着 下 面 的 步骤 来 学 习 ， 假 以 时 日 ， 您 会 成 为 


| 令 自己 惊讶 的 技术 大 咖 。 


(1) 扎实 的 基础 知识 + 大 量 的 中 小 实例 训练 + 有 针对 性 地 做 一 些 综合 案例 。 

(2) 大 量 的 项 目 案例 观摩 、 学 习 、 操 练 ， 塑 造 一 定 的 项 目 思维 。 

(3) 善于 借用 他 山 之 石 ， 对 一 些 成 熟 的 开源 代码 、 设 计 和 素材 拿 来 就 用 ， 学 会 站 在 巨人 的 肩膀 上 。 
(4) 有 工夫 多 参阅 一 些 官方 权威 指南 ， 拓 展 自 己 对 技术 的 理解 和 应 用 能 力 。 

(5) 最 为 重要 的 是 ， 多 与 同行 交流 ， 在 切磋 中 不 断 进步 。 

书本 厚度 有 限 ， 学 习 空 间 无 限 。 纸 张 价格 有 限 ， 知 识 价值 无 限 。 希望 本 书 能 帮 您 真正 收获 学 习 的 


”乐趣 和 知识 。 最 后 ， 视 您 阅读 快乐 ! 
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“网 络 开发 视频 大 讲堂 ”系列 从 书 于 2013 年 5 月 出 版 ， 因 其 编写 细腻 、 讲 解 透彻 、 实 用 易学 、 
配备 全 程 视频 等 ， 备 受 读者 欢迎 。 从 书 累计 销售 近 20 万 册 ， 其 中 , 《HTMLS+CSS3 从 入 门 到 精通 》 
累计 销售 10 万 册 。 同 时 ， 系 列 书 被 上 百 所 高 校 选 为 教学 参考 用 书 。 

本 次 改版 ， 在 继承 前 版 优点 的 基础 上 ， 进 一 步 对 图 书 内 容 进行 了 优化 ， 选 择 面试 、 就 业 最 急需 的 
内 容 ， 重 新 录制 了 视频 ， 同 时 增加 了 许多 当前 流行 的 前 端 技术 ， 提 供 了 “入 门 学 习 一 实例 应 用 一 项 目 
开发 一 能 力 测 试 一 面试 ”等 各 个 阶段 的 海量 开发 资源 库 ， 实 战 容量 更 大 ， 以 帮助 读者 快速 掌握 前 端 开 
发 所 需要 的 核心 精 艇 内 容 。 

CSS3 是 在 CSS2.1 基础 上 扩展 而 来 的 ， 本 书 将 详细 介绍 各 种 有 用 的 CSS3 技术 ， 总 结 CSS3 设计 
中 的 最 佳 实践 案例 ， 讨 论 解 决 各 种 实际 问题 ， 以 帮助 开发 者 更 好 地 掌握 CSS3 的 特性 ， 并 且 将 新 技术 
运用 到 实际 开发 中 ， 提 高 自己 开发 Web 程序 的 水 平 。 
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项 目 实 战 = 一 一 
使 用 CSS3 设计 动画 注意 、 提 示 、 说 明 
根据 不 同 设备 设计 响应 式 页 面 一 一 一 
- 使 用 JavaScript 控制 CSS3 样式 开发 资源 库 
CSS3 应 用 ‖ 使 用 CSS3 设 计 XML 文 档 样式 
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Csss 网 页 设计 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


本 书 特 扣 


1. 由 浅 入 深 ， 编 排 合理 ， 实 用 易学 

本 书 系统 地 讲解 了 CSS3 技 术 在 网 页 设计 中 各 个 方面 应 用 的 知识 ， 循 序 渐进 ， 配 合 大 量 实 例 ， 帮 
助 读者 商定 坚实 的 理论 基础 。 本 书 全 面 、 细 致 地 展示 CSS3 的 基础 知识 ， 同 时 讲解 了 CSS3 最 实用 、 
最 流行 的 技术 。 

2. 跟着 案例 和 视频 学 ， 入 门 更 容易 

跟着 例子 学 习 ， 通 过 训练 提升 ， 是 初学 者 最 好 的 学 习 方 式 。 本 书 案 例 丰 富 详 尽 ， 且 都 附 有 详尽 的 


“代码 注释 及 清晰 的 视频 讲解 。 跟 着 这 些 案例 边 做 边 学 ， 可 以 避免 学 到 的 知识 流 于 表面 、 限 于 理论 ， 尽 
“情感 受 编程 带 来 的 快乐 和 成 就 感 。 


3. 4 大 类 线 上 资源 ， 多 元 化 学 习 体验 
为 了 传递 更 多 知识 ， 本 书 力求 突破 传统 纸 质 书 的 厚度 限制 。 本 书 提供 了 4 大 类 线 上 微 资源 ， 通 过 


“手机 扫 码 ， 读 者 可 随时 观看 讲解 视频 ， 拓 展 阅读 相关 知识 ， 在 线 练习 强化 提升 ， 还 可 以 查阅 官方 权威 
”资料 ， 全 程 便捷 、 高 效 ， 感 受 不 一 样 的 学 习 体验 。 


4. 精彩 栏目 ， 易 错 点 、 重 点 、 难 点 贴心 提醒 


| 本 书 根 据 初 学 者 特点 ， 在 一 些 易 错 点 、 重 点 、 难 点 位 置 精心 设置 了 “注意 ”“ 提 示 ” 等 小 栏目 。 
， 通 过 这 些小 栏目 ， 读 者 会 更 留心 相关 的 知识 点 和 概念 ， 绕 过 陷阱 ， 掌 握 很 多 应 用 技巧 。 
本 书 配 套 资 源 
258 节 同 步 微 视频 
6 项 拓展 微 阅读 
378 个 实例 案例 分 析 
310 个 在 线 微 练习 > - 
详尽 的 配 书 资源 249 项 源 代码 资源 快速 掌握 前 端 开 发 精髓 
入 | 进 PSD 网 页 分 层 模板 (426 套 ) 
门 | 阶 设计 素材 大 全 (17 类 ，10000 个 ) 


网 页 配色 工具 箱 (600 个 ) 
网 页 模板 大 全 (632 套 ) 


前 端 素材 库 JavaScript 网 页 特效 大 全 ( 24 套 ) 


Bootstrap 网 页 模板 (500 套 ) 拿 来 就 用 ， 提 升 速 度 
训 | 提 Photoshop 设计 大 全 (18 类 ，2000 个 ) 
练 | 逢 历史 经 典 网 页 欣赏 ( 508 例 ) 
网 页 设计 初级 示例 大 全 ( 49 例 ) 
案例 资源 库 网 页 应 用 分 类 案例 大 全 (1600 例 ) 
HTML5+CSS3+JavaScript 实用 案例 大 全 Eee 
实 | 精 (3200 例 ) sa 
战 | 通 PHP、MySQL 参考 手册 (5 册 ) 
9 本 CSS 参考 手册 
权威 参考 手册 10 本 HTML 参考 手册 拓宽 眼界 ， 提 升 内 功 
23 本 JavaScript 参考 手册 
1 本 Photoshop 学 习 手 册 


打造 超 强 就 业 能 力 


eV|。 


读者 对 象 


具有 一 定 网 站 开发 经 验 的 初 、 中 级 用 户 。 

立志 从 事 网 站 开发 工作 的 从 业 人 员 。 

目 学 网 页 设计 或 网 站 开发 的 大 中 专 学 生 。 

各 类 网 站 站 长 。 

本 书 也 可 以 作为 各 大 中 专 院 校 相关 专业 的 教学 辅导 和 参考 用 书 ， 或 作为 相关 培 训 机 构 的 培 
训 教材 。 


办 办 多 的 


本 书 所 有 HTML 示例 都 应 该 嵌 套 在 一 个 有 效 文档 的 <body> 标 签 中 。 同 时 ，CSS 包含 在 内 部 或 外 ， 


Note 


部 样式 表 中 。 对 于 包含 重复 内 容 的 HTML 示例 ， 本 书 可 能 不 会 列 出 每 一 行 代码 ， 而 是 适时 地 使 用 省 


略 号 表示 部 分 代码 ， 详 细 代码 需要 参阅 本 书 配套 的 示例 源码 。 

本 书 所 列 出 的 插图 可 能 会 与 读者 实际 环境 中 的 操作 界面 有 所 差别 ， 这 可 能 是 由 于 操作 系统 平台 、 
浏览 器 版 本 等 不 同 而 引起 的 ， 在 此 特别 说 明 ， 读 者 应 该 以 实际 情况 为 准 。 

本 书 所 有 案例 代码 都 是 在 HIMLS 类 型 文档 中 编写 的 ,所 有 示例 也 同样 兼容 HIML 4.01 和 XHTML 1.0。 


由 于 CSS3 技术 在 不 断 地 完善 与 更 新 中 ， 建 议 根据 本 书 提供 的 参考 地 址 ， 获 取 有 关 CSS3 最 新 的 _ 


信息 与 服务 。 
读者 服务 


学 习 本 书 时 ， 请 先 扫描 封底 的 权限 二 维 码 〈 需 要 刊 开 涂 层 ) 获取 学 习 权限 ， 然 后 即 可 免费 学 习 书 


中 的 所 有 线 上 线 下 资源 。 


本 书 所 附 赠 的 超 值 资源 库 内 容 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 wwwtup.com.cn)， 在 对 应 图 ， 


书页 面 下 获取 其 下 载 方 式 。 也 可 扫描 图 书 封 底 的 “ 文 果 云 损 ”二 维 码 ， 获 取 其 下 载 方式 。 


本 书 提供 QQ 群 (668118468 、697651657)、 微 信 公 众 号 (qianduankaifa cn )、 服 务 网 站 ， 


(www.qianduankaifa.cn〉 等 互动 渠道 ， 提 供 在 线 技术 交流 、 学 习 答 疑 、 技 术 资 讯 、 视 频 课 治 、 在 线 
勘误 等 功能 。 在 这 里 ， 您 可 以 结识 大 量 志同道合 的 朋友 ， 在 交流 和 切磋 中 不 断 成 长 。 


读者 对 本 书 有 什么 好 的 意见 和 建议 ， 也 可 以 通过 邮箱 (qianduanjiaoshi@163.com) 发 邮件 给 我 们 。 | 
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章 


CSS3 基础 


CSS3 是 CSS 规范 的 最 新 版 本 ， 在 CSS2 基础 上 增加 了 很 多 新 功能 ， 如 圆 角 、 多 背景 、 
透明 度 、 阴 影 等 ， 以 帮助 开发 人 员 解 决 一 些 实际 问题 。 本 章 将 简单 介绍 CSS 基础 知识 ， 读 
者 可 初步 了 解 CSS 的 基本 用 法 。 


【 学 习 重 点 】 

BI 了 解 CSS。 

中 正确 使 用 CSS。 

WI 了 解 CSS 基本 特性 。 


Csss 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


1.1] CSS 概述 


寺 
本 节 简单 介绍 一 下 CSss 的 基本 情况 。 


EE 1.1.1 CSS 历史 


早期 的 HTML 结构 和 样式 是 混在 一 起 的 ， 通 过 HTML 标签 组 织 内 容 ， 通 过 标签 属性 设置 显示 效 
， 果 ， 这 就 造成 了 网 页 代码 混乱 不 堪 ， 代 码 维护 非常 困难 。 
1994 年 年 初 ， 哈 坤 。 利 提出 了 CSS 的 最 初 建议 。 伯 特 。 波 斯 (BertBos) 当时 正在 设计 一 款 Argo 
浏览 器 ， 于 是 他 们 一 拍 即 合 ， 决 定 共 同 开 发 CSS。 
1994 年 年 底 ， 哈 坤 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 CSS 的 建议 ，1995 年 他 与 波斯 一 起 再 次 
， 展示 这 个 建议 。 当 时 W3C (World Wide Web Consortium， 万 维 网 联盟 ) 组 织 刚 刚 成 立 ，W3C 对 CSS 
”的 前 途 很 感 兴 趣 ， 为 此 组 织 了 一 次 讨论 会 ， 哈 坤 、 波 斯 是 这 个 项 目的 主要 技术 负责 人 。 
1996 年 年 底 ，CSS 语言 正式 设计 完成 ， 同 年 12 月 ，CSS 的 第 一 个 版 本 正式 出 版 
(http://www.w3.0rg/TR/CSS1/)。 
1997 年 年 初 ，W3C 组 织 专门 负责 CSS 的 工作 组 ， 负 责 人 是 克 里 斯 。 里 雷 。 于 是 该 
工作 组 开始 讨论 第 一 个 版 本 中 没有 涉及 的 问题 。 
1998 年 5 月 ，CSS2 正式 出 版 《http://www.w3.org/TR/CSS2/)。 
2002 年 ，W3C 的 CSS 工作 组 启动 了 CSS2.1 开发 。CSS2.1 是 CSS2 的 修订 版 ， 它 
纠正 了 CSS 2.0 版 本 中 的 一 些 错误 ， 并 且 更 精确 地 描述 CSS 的 浏览 器 实现 。 
2004 年 ，CSS2.1 正式 发 布 。 
2006 年 年 底 ，CSS2.1 进一步 完善 ，CSS2.1 也 成 为 目前 最 流行 、 获 得 浏览 器 支持 最 完整 的 CSS 
| 版 本 ， 它 更 准确 地 反映 了 CSS 当前 的 状态 。 
CSS3 的 开发 工作 在 2000 年 之 前 就 开始 了 , 但 是 距离 最 终 的 发 布 还 有 相当 长 的 路 要 走 ， 为 了 提高 
， 开 发 速度 ， 也 为 了 方便 各 主流 浏览 器 根据 需要 渐进 式 支 持 ，CSS3 按 模块 化 进行 全 新 设计 ， 这 些 模块 
可 以 独立 发 布 和 实现 ， 这 也 为 日 后 CSS 的 扩展 葛 定 了 基础 。 
| 到 目前 为 止 ， CSS3 还 没有 推出 正式 的 完整 版 ， 但 是 已 经 陆续 推出 了 不 同 的 模块 ， 
这 些 模块 已 经 被 大 部 分 浏览 器 支持 或 部 分 实现 。 
CSS3 属性 支持 情况 请 访问 https://bestvpn.org/whats-my-ip/ 详 细 了 解 。 可 以 看 出 ， 完 
， 全 支持 CSS3 属性 的 浏览 器 包括 Chrome 和 Safari， 其 他 主流 浏览 器 除 正 早期 版 本 和 
，Firefox 3 外 也 基本 支持 。 


“1.1.2 CSS3 模块 


CSS1 和 CSS2.1 都 是 单一 的 规范 ， 其 中 CSS1 主要 定义 了 网 页 对 象 的 基本 样式 ， 如 
字体 、 颜 色 、 背 景 、 边 框 等 。CSS2 增加 了 高 级 概念 : 浮动 、 定 位 ， 以 及 高 级 选择 器 ， 
如 子 选 择 器 、 相 邻 选 择 器 和 通用 选择 器 等 。 

CSS3 被 划分 成 多 个 模块 组 , 每 个 模块 组 都 有 自己 的 规范 。 这 样 的 好 处 是 CSS3 规范 
的 发 布 不 会 因为 存在 争论 的 部 分 而 影响 其 他 模块 的 推进 。 对 于 浏览 器 来 说 ， 可 以 根据 需 
”要 决定 哪些 CSS 功能 被 支持 。 对 于 W3C 制定 者 来 说 , 可 以 根据 需要 进行 针对 性 的 更 新 ， 

从 而 更 加 灵活 和 及 时 地 修订 一 个 整体 的 规范 ， 这 样 更 容易 扩展 新 鲜 的 技术 特性 。 

2001 年 5 月 23 日，W3C 完成 CSS3 的 工作 草案 ， 在 该 草案 中 制订 了 CSS3 发 展 路 
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线 图 ， 路 线 图 详细 列 出 了 所 有 模块 ， 并 计划 在 未 来 逐步 进行 规范 (权威 参考 : http://www.w3.org/ 
TR/css3-roadmap/)。 
下 面 简单 介绍 CSS3 各 主要 模块 内 容 和 参考 地 址 ， 用 户 仅 做 了 解 或 备查 参考 。 


2002 年 5 月 15 日 发 布 CSS3 line 模块 (http://www.w3.org/TR/CSS3-linebox/) ， 该 模块 规范 
了 文本 行 模型 。 

2002 年 11 月 7 日 发 布 CSS3 Lists 模块 (http://www.w3.org/TR/CSS3-lists/) ， 该 模块 规范 了 
列表 样式 。 

2002 年 11 月 7 日 发 布 CSS3 Border 模块 (http://www.w3.org/TR/2002/WDess3-border- 
20021107/) ， 新 添加 了 背景 边框 功能 。 该 模块 后 来 合并 到 背景 模块 〈http:/www-.w3.org/ 
TR/css3-background/) 中 。 

2003 年 5 月 14 日 发 布 CSS3 Generated and Replaced Content 模块 (http://www.w3.org/TR/ 
css3-content/) ， 该 模块 定义 了 CSS3 的 生成 及 更 换 内 容 功能 。 

2003 年 8 月 13 日 发 布 CSS3 Presentation Levels 模块 (http:/www.w3.org/TRVcss3-preslev/) ， 
该 模块 定义 了 演示 效果 功能 。 

2003 年 8 月 13 日 发 布 CSS3 Syntax 模块 (http://www.w3.org/TR/CSS3-syntax/) ， 该 模块 重 
新 定义 了 CSS 语法 规则 。 

2004 年 2 月 24 日 发 布 CSS3 Hyperlink Presentation 模块 (http://www.w3.org/TR/css3- 
hyperlinks/) ， 该 模块 重新 定义 了 超 链接 表示 规则 。 

2004 年 12 月 16 日 发 布 CSS3 S peech 模块 (http://www.w3.org/TR/CSS3-speech/) ， 该 模块 
重新 定义 了 语音 “样式 ”规则 。 

2005 年 12 月 15 日 发 布 CSS3 Cascading and inheritance 模块 (http://www.w3.org/TR/css3- 
cascade/) ， 该 模块 重新 定义 了 CSS 层 登 和 继承 规则 。 

2007 年 8 月 9 日 发 布 CSS3 Basic Box 模块 (http://www.w3.org/TR/CSS3-box/) ， 该 模块 重 
新 定义 了 CSS 基本 盒 模型 规则 。 

2007 年 9 月 5 日 发 布 CSS3 Grid Positioning 模块 (http://www.w3.org/TR/CSS3-grid/) ， 该 模 
块 定义 了 CSS 网 格 定位 规则 。 

2009 年 3 月 20 日 发 布 CSS3 Animations 模块 (http://www.w3.org/TR/CSS3-animations/) ， 
该 模块 定义 了 CSS 动画 模型 。 

2009 年 3 月 20 日 发 布 CSS3 3D Transforms 模 块 (http://www.w3.org/TR/CSS3-3d-transforms/)， 
该 模块 定义 了 CSS 3D 转换 模型 。 

2009 年 6 月 18 日 发 布 CSS3 Fonts 模块 (http://www.w3.org/TR/CSS3-fonts/) ， 该 模块 定义 
了 CSS 字体 模型 。 

2009 年 7 月 23 日 发 布 CSS3 Image Values 模块 (http:/www.w3.org/TR/VCSS3-images/) ， 访 
模块 定义 了 图 像 内 容 显 示 模 型 。 

2009 年 7 月 23 日 发 布 CSS3 Flexible Box Layout 模块 (http://www.w3.org/TR/CSS3-flexbox/) ， 
该 模块 定义 了 灵活 的 框 布局 模块 。 

2009 年 8 月 4 日 发 布 Lssom View uodule 模块 (http://www.w3.org/TR/cssom-view/) ， 该 模 
块 定义 了 CSS 视图 模块 。 

2009 年 12 月 1 日 发 布 CSS3 Transitions 模块 (http://www.w3.org/TR/css-transitions-1/) ， 该 
模块 定义 了 动画 过 渡 效 果 模 型 。 

2009 年 12 月 1 日 发 布 CSS3 2D Transforms 模块 (http://www.w3.org/TR/css-transforms-1/) ， 
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该 模块 定义 了 2D 转换 模型 。 

2010 年 4 月 29 日 发 布 CSS3 Template Layout 模块 (http://www.w3.org/TR/CSS3-layout/) ， 

该 模块 定义 了 模板 布局 模型 。 

加 ”2010 年 4 月 29 日 发 布 CSS3 Generated Content for Paged Media 模块 (http:/www.w3.org/ 

TR/css3-gcpm/) ， 该 模块 定义 了 分 页 媒体 内 容 模型 。 

2010 年 10 月 5 日 发 布 CSS3 Text 模块 (http://www.w3.org/TR/CSS3-text/) ， 该 模块 定义 了 
文本 模型 。 

2010 年 10 月 5 日 发 布 CSS3 Backgrounds and Borders 模块 (http://www.w3.org/TR/CSS3- 

background/) ， 该 模块 更 新 了 边框 和 背景 模型 。 


1.1.3 CSS3 开发 状态 


CSS3 每 一 个 模块 都 有 独立 的 开发 和 更 新 计划 , 如 图 1.1 所 示 ， 从 该 图 中 可 以 看 到 CSS3 当前 发 展 
的 详细 进度 。 更 详细 的 信息 可 参见 http:/www.w3.org/Style/CSS/current-work.html， 其 中 介绍 了 CSS3 
具体 划分 为 多 少 个 模块 组 、CSS3 所 有 模块 组 目前 所 处 的 状态 ， 以 及 将 在 什么 时 间 发 布 。 


Ordered from most to least 5table: 


| 
| 
| 回 


Completed Current Upcoming Notes ©® 
CS5 Snapshot 2017 Latcst stablc CS5 DD 
CSS Snapshot 2015 全 
Refinin Current Upcoming Notes 
CSS Snapshot 2010 ®D 和 st ® 
Css Sn, 2007 加 CSS Animations 中 
apshot ) 
Web Animations 1.0 DD 
CSS Color Level 3 See Errata (OR = 
CSS Text Level 3 ® 
CSS Namespaces OD 
CSS Transforms DD 
Selectors Level 3 全 
CSS Transitions @ 
CS5 Level 2 Revision | Sce Errata 全 
= CSS Box Alignment Level 3 (ON 
CSS Level | Unmaintained, see Snapshot 全 
CSS Display Level 3 OD 
CSS Print Profile 全 
Preview of CSS Level 2 DD 
Media Queries OD 
® CSS Timing Functions Level | @ 


CSS Style Attributes 


Revisin Upcoming Notes 
Stable Current Upcoming Notes @ a 8 @ 
和 CSS Paged Media Level 3 @ 
CSS Backgrounds and Borders Leyel 3 人 
CSSOM View DD 
CSS Conditional Rules Level 3 OD 
Seclectors Level 4 OD 
CS5 Multi-column Layout (全 ee 
= CSS Intrinsic & Extrinsic Sizing Level 3 (yy 
CSS Values and Units Level 3 全 
CSS Ruby Level | OD 
CSS Cascading and Inheritance Level 3 (Oy ， 
CSS Fonts Level 3 全 CSS Font Loading 四 
CSS Writing Modes Level 3 (OO CSS Sroning | rvrl | 月 
CSS Basic Box Model Level 3 Dangerously outdated; see CSS 2.1 | 
CSS Counter Styles Level 3 ® eee ee = 
C55 Generated Content Level 3 QD 
Testing Current Upcoming Notes 


Abandoned 


TE EE OE OE I EE Oe ee Ee Oe Ve EE RE EF 


CSS Image Values and Replaced Content Level 3 
CSS Speech 

CSS Flexible Box Layout 

CSS Text Decoration Level 3 

CSS Shapes Level | 

CSS Masking Level | 


CS5 Fragmentation Leve| 3 

CSS Cascading Variables 
Compositing and Blending Level | 
CSS Syntax Level 3 

CSS Grid Layout Level | 

CSS Basic User Interface Level 3 
CSS Will Change Level | 

Media Qucrics lcvcl 4 

Geometry Interfaces Level | 

CSS Cascading and Inheritance Level 4 
CSS Scroll Snap Level | 

CSS Containment Level | 


OIGOIO OGIO OOOO OO GOOIOO!© 


CSS Mobile Profile 2.0 

The CSS Reader' Media Type 
CSS Presentation Levels 

CSS TY Profile 1.0 

CSS Marquee 

BoveL rer r~ Te 
这 Jp rl sscmauun 


Fullscreen 


Some related specifications by other Working Groups: 


Te Current Notes 
Predefined Counter Styles 
CsS5S Techniques for Web Content Accessibility Guidelines 1.0 


The Yiew-mode' Media Feature 
Selectors API Level | 
Selsctors API Levcl 2 


Web Applications WG 
Web Applications WG 
Web Applications WG 


OOOOOOOO 


1.1 CSS3 所 有 模块 进度 表 


其 中 ，Current 列表 示 模 块 当前 的 状态 ，Upcoming 列表 示 即 将 进行 的 状态 。 各 种 状态 缩写 词 说 明 
如 下 。 
WD: Working Draft， 表 示 工 作 草 案 。 
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LC: Last Call， 表 示 最 终 工作 草案 。 

CR: Candidate Recommendation， 表 示 候 选 推 荐 标准 。 

PR: Proposed Recommendation， 表 示 建 议 推荐 标准 。 

回 “REC: Recommendation， 表 示 推 荐 标准 。 会 六 

【扩展 】 | 个 

W3C 标准 只 是 推荐 标准 ， 并 没有 强制 执行 的 效力 。 不 过 ， 鉴 于 W3C 在 Web Wi Note 
和 强大 号 召 力 ，W3C 发 布 的 推荐 标准 ， 通 常 浏 宽 器 厂商 都 很 重视 并 积极 支持 。 

一 般 情况 下 ，W3C 标准 制订 经 历 下 面 几 个 阶段 ， 这 些 阶 段 都 有 专 有 术语 ， 拥 有 定义 好 的 含义 ， 
虽然 也 有 变化 ， 但 修订 频率 不 高 ， 最 新 版 是 2005 年 制订 的 ， 具 体 说 明 如 下 。 

第 1 阶段 : 工作 草案 (Working Draft)。 

工作 组 依据 工作 组 章程 (Charter) 提出 一 系列 工作 草案 。 公 众 和 W3C 会 员 可 以 提出 评论 和 问题 ， 
工作 组 必须 处 理 这 些 反 馈 。 本 阶段 时 长 依 多 种 因素 而 变 。 

第 2 阶段 : 最终 工作 草案 (Last Call Working Draft)。 | 

工作 组 已 完成 工作 ， 并 要 求 公众 和 W3C 会 员 提交 最 后 的 评论 与 问题 。 同 样 ， 工 作 组 必须 处 理 这 ， 
些 反 馈 。 如 果 出 现 问 题 ， 可 能 要 回 到 工作 草案 阶段 。 本 阶段 时 长 通常 为 3 周 ， 但 也 可 以 更 长 。 ] 

第 3 阶段 : 候选 推荐 标准 (Candidate Recommendation )。 | 

当 最 终 工作 草案 阶段 结束 且 问 题 都 得 到 解决 后 , 将 进入 候选 推荐 标准 阶段 此 时 认为 该 规范 已 经 ， 
稳定 , 可 以 展开 试验 性 实施 了 。 工作 组 必须 将 实施 中 得 到 的 反馈 整合 到 规范 中 。 同样 ,如果 出 现 问 题 ， | 
须 返 回 工作 草案 阶段 。 根 据 实施 进展 ， 本 阶段 通常 持续 0 一 1 年 。 | 

第 4 阶段 : 建议 推荐 标准 (Proposed Recommendation ) 。 | 

如 无 意外 ， 规 范 将 进入 建议 推荐 标准 阶段 。 在 此 阶段 ，W3C 总 监 (Tim Berners-Lee) 将 正式 请 | 
求 W3C 会 员 审阅 建议 推荐 标准 。 本 阶段 时 长 不 少 于 4 周 。 

第 5 阶段 : 推荐 标准 〈Recommendation )。 

根据 审阅 结果 ，W3C 总 监 宜 布 该 规范 成 为 W3C 推荐 标准 ， es 或 者 返回 工 ， 
作 草 案 阶 段 ， 或 者 彻底 从 W3C 工作 日 程 上 移 去。 技术 规范 一 旦 成 为 推荐 标准 ， 它 就 是 官方 的 W3C ， 
标准 了 。 

当然 由 于 种 种 因素 ， 有 些 W3C 草案 未 能 在 W3C 得 到 青睐 ， 最 终 只 能 成 为 Note， 这 意味 着 没有 
厂商 会 去 实现 它 。 | 

最 后 ， 在 实际 操作 中 ， 很 多 浏览 器 厂商 出 于 利益 或 技术 上 的 考虑 ， 可 能 会 不 完全 遵照 W3C 推荐 
标准 来 实现 其 产品 ， 因 此 用 户 会 发 现 各 个 厂商 的 浏览 器 对 CSS3 技术 文 持 程度 各 不 相同 。 


1.1.4 ”浏览 器 支持 状态 


CSS3 特性 大 部 分 都 已 经 有 了 很 好 的 浏览 器 支持 度 。 各 主流 浏览 器 对 CSS3 的 支持 越 来 越 完善 ， 
下 面 来 了 解 一 下 两 大 平台 (Mac 和 Windows)、 五 大 浏览 器 (Chrome、Firefox、Safari、Opera 和 IE) 
对 CSS3 新 特性 和 CSS3 选择 器 的 支持 情况 。 | 
CSS3 属性 支持 情况 如 图 1.2 所 示 (http:/fmbip.conylitmus/)。 可 以 看 出 ， 完 全 支持 CSS3 属性 的 ， 
浏览 器 有 Chrome 和 Safari， 而 且 不 管 是 Mac 平台 还 是 Windows 平台 全 支持 。 | 
CSS3 选择 器 支持 情况 如 图 1.3 所 示 《http://fmbip.comylitmus/)。 除 了 正 家 族 和 Firefox 3， 其 他 | 
几乎 全 部 支持 。 其 中 ，Chrome、Safari、Firefox 3.6、Opera 10.5 最 好 。 
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图 1.3 CSS3 选择 器 支持 列表 
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< 入 注意 : 各 主流 浏览 器 也 定义 大 量 私 有 属性 ， 方 便 用 户 体验 CSS3 的 新 特性 。 例 如 : 


以 Gecko 引擎 为 核心 的 浏览 器 (如 Firefox ) 的 私有 属性 都 以 -moz- 前 级 定义 。 
以 Konqueror 引擎 为 核心 的 浏览 器 的 私有 属性 都 以 -khtml- 前 组 定义 。 

Opera 浏览 器 的 私有 属性 以 -0- 前 级 定义 。 

Internet Explorer 浏览 器 的 私有 属性 以 -ms- 前 组 定义 ，IE 8+ 支 持 -ms- 前 级 。 


和 凶 凶 凶 怕 


1.2 CSS 基本 用 法 


CSS 是 一 种 标识 语言 ， 可 以 在 任何 文本 编辑 器 中 编辑 。 下 面 简单 介绍 CSS 的 基本 用 法 。 


1.2.1 


CSS 样式 


CSS 的 语法 单元 是 样式 ， 每 个 样式 包含 两 部 分 内 容 : 选择 器 和 声明 (或 称 为 规则 )， 如 图 1.4 所 示 。 


选择 器 样式 分 隐 得 声明 声明 样式 分 隔 符 


| font-slze : 14px: color :#000; | 


网 页 标签 名 属性 ”属性 值 属性 ”属性 值 
图 1.4 CSS 样式 基本 格式 


选择 器 (Selector) : 指定 样式 作用 于 哪些 对 象 ， 这 些 对 象 可 以 是 茶 个 标签 、 指 定 Class 或 ID | 


值 的 元 素 等 。 浏 览 右 在 解析 这 个 样式 时 ， 根 据 选 择 右 来 演 染 对 象 的 显示 效果 。 

声明 (Declaration) : 指定 浏览 器 如 何 演 染 选择 器 匹配 的 对 象 。 声 明 包 括 属 性 和 属性 值 两 部 
分 ， 并 用 分 号 来 标识 一 个 声明 的 结束 ， 在 一 个 样式 中 最 后 一 个 声明 可 以 省 略 分 号 。 所 有 声明 
被 放置 在 一 对 大 括号 内 ， 位 于 选择 器 的 后 面 。 

属性 〈Property) : CSS 预 设 的 样式 选项 。 属 性 名 由 一 个 单词 或 多 个 单词 组 成 ， 多 个 单词 之 
间 通 过 连 字 符 相 连 ， 这 样 能 够 很 直观 地 了 解 属性 所 要 设置 样式 的 类 型 。 

属性 值 Value) : 定义 显示 效果 的 值 ， 包 括 值 和 单位 ; 或 者 仅 定 义 一 个 关键 字 。 


【示例 】 下 面 示例 简单 演示 了 如 何在 网 页 中 设计 CSS 样式 。 

【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml。 

第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 

第 3 步 ， 在 <style> 标 签 内 输入 下 面 样式 代码 ， 定 义 网 页 字体 大 小 为 24px， 字 体 颜 色 为 白色 。 


body {font-size: 24px: color: #ffF:} 
第 4 步 ， 输 入 下 面 样式 代码 ， 定 义 段落 文本 的 背景 色 为 监 色 。 

p {background-color: #00F:} 

第 5 步 ， 在 <body> 标 签 内 输入 下 面 一 段 话 ， 然 后 在 浏览 器 中 预览 ， 效 果 如 图 1.5 所 示 。 


e。 7 。 


以 Webkit 引擎 为 核心 的 浏览 器 (如 Safari、Chrome ) 的 私有 属性 都 以 -webkit- 前 组 定义。 | 


<body> 
<p> 葛 等 闲 、 白 了 少年 头 ， 空 翡 切 。 </p> 
</body> 


| 
| 
Ey 二 
| € SE httpy/localhostrtest ~ 及 地 碟 css 
和 二 AN SY 3 2 


图 1.5 使 用 CSS 定义 段落 文本 样式 


i 1.2.2 引入 CSS 样式 

频 讲 解 ， 在 网 页 中 ， 有 3 种 方法 可 以 正确 引入 CSS 样式 ， 让 浏览 器 能 够 识别 和 解析 。 
1， 行 内 样式 

把 Css 样式 代码 置 于 标签 的 style 属性 中 ， 例 如 ， 


<span style="color:red:"> 红 色 字 体 </span> 
<div style="border:solid 1px blue: width:200px; height:200px:;"></div> 


这 种 用 法 没有 真正 把 HTML 结构 与 CSS 样式 分 离 ， 一 般 不 建议 大 规模 使 用 。 除 非 为 页 面 中 某 个 
元 素 临时 设置 特定 样式 。 

2. 内 部 样式 

把 CSS 样式 代码 放 在 <style> 标 签 内 ， 例 如 : 


<style type="text/css"> 

body {页面 基 本 属性 */ 
font-size: 12px; 
color: 其 CCCCC; 


} 

放 段 沙文 本 基础 属性 */ 

p {background-color: #FFOOFF:} 

</style> 

这 种 用 法 也 称 为 网 页 内 部 样式 ， 适 合 为 单 页 面 定 义 CSS 样式 ， 不 适合 为 一 个 网 站 或 多 个 页 面 定 


内 部 样式 一 般 位 于 网 页 的 头 部 区 域 ， 目 的 是 让 CSS 源 代码 早 于 页 面 源 代码 下 载 并 被 解析 ， 避 免 
当 网 页 下 载 之 后 还 无 法 正常 显示 。 

3. 外 部 样式 

把 样式 放 在 独立 的 文件 中 ， 然 后 使 用 <link> 标 签 或 者 @import 关键 字 导 入 。 一般 网 站 都 采用 这 种 方法 
， 来 设计 样式 ， 真 正 实现 HTML 结构 和 CSS 样式 的 分 离 ， 以 便 统筹 规划 、 设 计 、 编 辑 和 管理 CSS 样式 。 


1.2.3 CSS 样式 表 
样式 表 是 一 个 或 多 个 CSS 样式 组 成 的 样式 代码 段 ， 分 为 内 部 样式 表 和 外 部 样式 表 ， 它 们 没有 本 


。8。 
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质 区 别 ， 只 是 存放 位 置 不 同 。 


内 部 样式 表 包 含 在 <style> 标 签 内 ， 一 个 <style> 标 签 就 表示 一 个 内 部 样式 表 。 而 通过 标签 的 style 
属性 定义 的 样式 属性 就 不 是 样式 表 。 如 果 一 个 网 页 文档 中 包含 多 个 <style> 标 签 , 就 表示 该 文档 包含 多 


个 内 部 样式 表 。 


如 果 CSS 样式 被 放置 在 网 页 文档 外 部 的 文件 中 ， 则 称 为 外 部 样式 表 ， 一 个 CSS 样式 表 文 档 就 表 


示 一 个 外 部 样式 表 。 实 际 上 ， 外 部 样式 表 也 就 是 一 个 文本 文件 ， 其 扩展 名 为 .css。 | 
制 到 一 个 文本 文件 中 后 ， 另 存 为 .css 文件 ， 则 它 就 是 一 个 外 部 样式 表 。 


Note 


在 外 部 样式 表 文件 项 部 可 以 定义 CSS 源 代码 的 字符 编码 。 例 如 ， 下 而 代码 定 六 村 式 表 文件 的 字 


符 编 码 为 中 文 简 体 。 
(charset "gb2312"; 


如 果 不 设置 CSS 文件 的 字符 编码 ， 可 以 保留 默认 设置 ， 则 浏览 器 会 根据 HTML 文件 的 字符 编码 
来 解析 CSS 代码 。 


1.2.4 导入 外 部 样式 表 


外 部 样式 表 文 件 可 以 通过 两 种 方法 导入 HIML 文档 中 。 

1. 使 用 <link> 标 签 

使 用 <link> 标 签 导 入 外 部 样式 表 文 件 的 代码 如 下 : 

<link hre 伟 "001.css" rel="stylesheet" type="text/css" /> 

该 标签 必须 设置 的 属性 说 明 如 下 。 

href: 定义 样式 表 文件 URL。 

type: 定义 导入 文件 类 型 ， 同 style 元 系 一 样 。 

rel: 用 于 定义 文档 关联 ， 这 里 表示 关联 样式 表 。 

2. 使 用 @import 命令 

在 <style> 标 签 内 使 用 @import 关键 字 导 入 外 部 样式 表 文 件 的 方法 如 下 : 


<style type="text/css"> 
Wimport url("001.css"); 
</style> 


在 @import 关键 字 后 面 ， 利 用 urlO 函 数 包含 具体 的 外 部 样式 表 文件 的 地 址 。 
1.2.5 CSS 格式 化 


在 CSS 中 增加 注释 很 简单 ， 所 有 被 放 在 “上 #” 和 “所 ”分 隔 符 之 间 的 文本 信息 都 被 称 为 注释 。 例 如 : 
/# 注 释 #/ 
或 


/水 
注释 
ud 


| 视频 讲解 


(sss 几 页 设计 从 入 门 到 精 道 【 撤 保 精 编 版 ) 


在 CSS 中 ， 各 种 空格 是 不 被 解析 的 ， 因 此 用 户 可 以 利用 Tab 键 、 空 格 键 对 样式 表 和 样式 代码 进 
， 行 格式 化 排版 ， 以 方便 阅读 和 管理 。 


“1.2.6 CSS 属性 


EZ CSS 属性 众多 ， 在 W3C CSS 2.0 版 本 中 共有 122 个 标准 属性 (http://www.w3.org/TR/CSS2/ 


propidx.html)， 在 W3C CSS 2.1 版 本 中 共有 115 个 标准 属性 (http://www.w3.org/TR/CSS21/propidx.html)， 
其 中 删除 了 CSS 2.0 版 本 中 7 个 属性 : font-size-adjust、font-stretch、marker-offset、marks、page、size 
和 text-shadow。 在 W3C CSS 3.0 版 本 中 又 新 增加 了 20 多 个 属性 (http://www.w3.org/Style/CSS/current- 


a | Wwork#CSS3 ) 。 


属性 的 用 法 将 在 后 面 各 章节 中 详细 说 明 ， 用 户 也 可 以 通过 CSS3 参考 手册 具体 了 解 。 


”1.2.7 CSS 属性 值 


| CSS 属性 取 值 比较 多 ， 具 体 类 型 包 插 长度、 角度、 时 间 、 频 率 、 布 局 、 分 辩 率 、 颜 色 、 文 本 、 孔 
数 、 生 成 内 容 、 图 像 和 数字 。 下 面 重点 介绍 一 下 营 用 的 长 度 值 ， 其 他 类 型 值 将 在 相应 属性 中 具体 说 明 。 

长 度 值 包括 绝对 值 和 相对 值 两 类 。 

1. 绝对 值 

绝对 值 在 网 页 中 很 少 使 用 ， 一 般 用 在 特殊 的 场合 。 常 见 绝对 单位 如 下 。 

英寸 (in) : 使 用 最 广泛 的 长 度 单位 。 

厘米 (cm) : 最 常用 的 长 度 单位 。 

时 米 (mm) : 在 研究 领域 使 用 广泛 。 

磅 (pt) : 也 称 点 ， 在 印刷 领域 使 用 广泛 。 

pica (pc) : 在 印刷 领域 使 用 。 

2. 相对 值 

相对 值 是 根据 屏幕 分 辨 率 、 可 视 区 域 、 浏 览 器 设置 ， 以 及 相关 元 素 的 大 小 等 因素 确定 值 的 大 小 。 

第 见 相 对 单位 如 下 。 

em: 表示 字体 高 度 ， 它 能 够 根据 字体 的 font-size 值 来 确定 大 小 ， 例 如 : 

p{/* 设 置 段落 文本 属性 */ 


font-size:12px; 
line-height:2em:/#* 行 高 为 24px*/ 


多 的 


} 


从 上 面 样式 代码 中 可 以 看 出 : 一 个 em 等 于 font-size 的 属性 值 ， 如 果 设 置 font-size:12pt， 则 
line-height:2em 就 会 等 于 24pt。 如 果 设 置 font-size 属性 的 单位 为 em， 则 em 的 值 将 根据 父 元 素 的 font-size 
属性 值 来 确定 。 例 如 ， 定 义 如 下 HTML 局 部 结构 : 
<div id="main"> 

<p>em 相对 长 度 单位 使 用 </p> 
</div> 


再 定义 如 下 样式 : 
区 naim { font-slze:12pX:} 


p ffont-size:2em:} /* 字 体 大 小 将 显示 为 24px*/ 
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同 理 ， 如 果 父 对 象 的 font-size 属性 的 单位 也 为 em， 则 将 依次 向 上 级 元 素 寻 找 参 考 的 font-size 必 
性 值 ， 如 果 都 没有 定义 ， 则 会 根据 浏览 器 默认 字体 进行 换算 ， 默 认 字体 一 般 为 16px。 | 
加 ”ex: 表示 字母 x 的 高 度 。 | 
回 px: 根据 屏幕 像素 点 来 确定 大 小 。 这 样 不 同 的 显示 分 辩 率 就 会 使 相同 取 值 的 px 单位 所 显示 。。 的” 
出 来 的 效果 截然 不 同 。 | 
回 ”%: 百分比 也 是 一 个 相对 单位 值 。 百 分 比值 总 是 通过 另 一 个 值 来 确定 当前 值 ， 一 般 参 考 父 对 
象 中 相同 属性 的 值 。 例 如 ， 如 果 父 元 素 宽度 为 500px， 子 元 素 的 宽度 为 50%， 则 子 元 素 的 实 
际 宽度 为 250px。 


Note 


1.3 CSS 特性 | 


CSS 样式 具有 两 个 特性 : 继承 性 和 层 丢 性 ， 下 面 分别 进 行 说 明 。 
1.3.1 CSS 继承 性 


CSS 继承 性 是 指 后 代 元 素 可 以 继承 祖先 元 素 的 样式 。 继 承 样式 主要 包括 字体 、 文 本 等 基本 属性 ， ， 视频 许久 
如 字体 、 字 号 、 颜 色 、 行 距 等 ， 对 于 下 面 类 型 属性 是 不 允许 继承 的 : 边框 、 边界、 补 白 、 背 景 、 定 位 、 
布局 、 尺 寸 等 。 | 


全 提示 : 灵活 应 用 CSS 继承 性 ， 可 以 优化 CSS 代码 ， 但 是 继承 的 样式 的 优先 级 是 最 低 的 。 


【示例 】 下 面 示例 在 body 元 素 中 定义 整个 页 面 的 字体 大 小 、 字 体 颜 色 等 基本 页 面 属 性 ， 这 样 包 / 
含 在 body 元 素 内 的 其 他 元 素 都 将 继承 该 基本 属性 ， 以 实现 页 面 显 示 效 果 的 统一 。 
新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 如 下 代码 ， 设 计 一 个 多 级 髓 套 结构 。 


<div 1d="wrap"> ] 
<div 1d="header"> | 
<div 1d="menu"> | 
<ul> 
<]li><span> 首 页 </span>< 沾 > 
<]> 菜 单项 </li> 
</ul> 
</div> 
</div> | 
<div id="main"> | 
<p> 主 体内 容 </p> 
</div> 
</div> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 内 部 样式 表 ， 然后 为 body 定义 字体 大 小 为 
12px， 通 过 继承 性 ， 则 包含 在 body 元 素 中 的 所 有 其 他 元 素 都 将 继承 该 属性 ， 并 显示 包含 的 字体 大 小 
为 12px。 在 浏览 器 中 预 钨 ， 显 示 效 果 如 图 1.6 所 示 。 


body {font-size:12px:} 


。 11。 


Cn 
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图 1.6 CSS 继承 性 演示 效果 


1.3.2 CSS 层 仅 性 


CSS 层 登 性 是 指 CSS 能 够 对 同一 个 对 象 应 用 多 个 样式 的 能 力 。 
【示例 1】 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 如 下 代码 : 


<div id="wrap"> 看 看 我 的 样式 效果 </div> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 分 别 添加 两 个 样式 : 


div {font-size:12px:} 
div {font-size:14px:} 


两 个 样式 中 都 声明 相同 的 属性 ， 并 应 用 于 同一 个 元 素 上 。 在 浏览 器 中 测试 ， 则 会 发 现 最 后 字体 显 


示 为 14px， 也 就 是 说 14px 字体 大 小 宪 盖 了 12px 字体 大 小 ， 这 就 是 样式 层 登 。 


当 多 个 样式 作用 于 同一 个 对 象 时 ， 则 根据 选择 器 的 优先 级 ， 确 定 对 象 最 终 应 用 的 样式 。 
标签 选择 器 : 权重 值 为 1。 

伪 元 素 或 伪 对 象 选 择 器 : 权重 值 为 1。 

类 选择 器 : 权重 值 为 10。 

属性 选择 器 : 权重 值 为 10。 

ID 选择 器 : 权重 值 为 100。 

其 他 选择 器 : 权重 值 为 0， 如 通 配 选 择 器 等 。 

然后 ， 以 上 面 权 值 数 为 起 点 来 计算 每 个 样式 中 选择 器 的 总 权 值 数 。 计 算 规则 如 下 。 
统计 选择 器 中 ID 选择 器 的 个 数 ， 然 后 乘 以 100。 

统计 选择 器 中 类 选择 器 的 个 数 ， 然 后 乘 以 10。 

统计 选择 器 中 标签 选择 器 的 个 数 ， 然 后 乘 以 1。 

以 此 方法 类 推 把 所 有 权重 值 数 相 加 ， 即 可 得 到 当前 选择 器 的 总 权重 值 ， 最 后 根据 权重 值 来 决定 


加 罗网 网 加 名 


哪个 样式 的 优先 级 大 。 


【示例 2】 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 如 下 代码 : 
<div id="box" class="red">CSS 选择 器 的 优先 级 </div> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 添 加 如 下 样式 : 


body div#box {border:solid 2px red:} 
#box {border:dashed 2px blue:} 
div.red {border:double 3px red:} 
对 于 上 面 的 样式 表 ， 可 以 这 样 计算 它们 的 权重 值 : 
body div#box = 1+1+100= 102 
#box = 100 
ded=1 二 0 志和 
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因此 ， 最 后 的 优先 级 为 body div#box 大 于 #box，#box 大 于 di.red。 所 以 可 以 看 到 显示 效果 为 2px | 
的 红色 实 线 。 在 浏览 器 中 预览 ， 显 示 效 果 如 图 1.7 所 示 。 


xX 
DE | 
CSS 选 择 器 的 优先 级 


图 1.7 CSS 优先 级 的 样式 演示 效果 
会 提示 : 与 样式 表 中 样式 相 比 ， 行 内 样式 优先 级 最 高 ; 相同 权重 值 时 ， 样 式 最 近 的 优先 级 最 高 ; 使 ， 


| 
用 !important 命令 定义 的 样式 优先 级 绝对 高 ; !important 命令 必须 位 于 属性 值 和 分 号 之 间 ， ， 
如 #header{color:Red!important:}， 否 则 无 效 。 


1.4 案例 实战 


本 节 设 计 一 个 完整 页 面 ， 体 验 标准 网 页 的 制作 过 程 。 案 例 页 面 设计 效果 如 图 1.8 所 示 。 | 
Se +) |@ http://localhost/index.html ~ 及 上 
[CSS3+DIV] | 


| ello World 一 第 一 个 CSS3+DIV 页 面 


| 
以 下 化 码 是 我 的 第 一 个 CSS33DIV 丙 面 ， 访 南面 红色 居中 时 示 字 香里 Hello Worldl。 | 
<!CGoctype html> | 
<html> 
<heady> | 
meta charset-"utf-8"> 
<title>Hello World</title> 


<style type-—"text/css"> 
hl { 


Color;: #FF0D00; | 
text-align: Cemtezr 
1 | 
x/atyle> 
</head> 
<body> 
<h1l>Hello World! </h1> 


图 1.8 使 用 CSS 设计 的 第 一 个 页 面 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 HTML 文档 ， 保 存 为 index.html。 


会 提示 : 本 页 面 所 需要 的 图 片 等 素材 可 以 参考 附 赠 的 源 代 码 。 考 虑 到 很 多 初学 者 是 第 一 次 接触 CSS， 
本 案例 稍 显 复杂 , 因此 建议 读者 可 根据 实际 情况 选择 性 地 学 习 , 或 直接 跳 过 本 节操 作 练习 。 


。13。 


Note 


Csss 网 页 设计 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


第 2 步 , 切换 到 代码 视图 ， 在 <body> 标 签 内 输入 下 面 代码 ,构建 本 页 面 主体 结构 ， 设 计 本 例 页 面 


一 级 框架 。 


<!--[ 一 级 框架 ]--> 

< 一 顶部 一 > 

<div 1d="top"></div> 

<div 1d="topl1"></div> 
<!-- 主 体 --> 

<div 1d="main"></div> 
<1-- 弃 部 一 > 

<div 1d="footer"></div> 
<div 1d="copyright"></div> 


在 标准 布局 中 ， 读 者 应 该 为 每 个 div 框架 元 素 定 义 id 属性 ， 这 些 id 属性 如 同人 的 身份 证 一 样 ， 


方便 CSS 准确 地 控制 每 个 div 布局 块 。 所 以 ， 为 了 阅读 和 维护 的 需要 ， 应 该 为 id 属性 起 一 个 有 意义 
”的 名 字 。 


第 3 步 ， 进 一 步 细 化 页 面 结 构 ， 设 计 页 面 内 部 层次 框 殿 。 由 于 本 例 页 面 比较 简单 ， 般 套 框 以 不 会 


”很 深 ， 顶 部 和 底部 布局 块 可 能 就 不 要 髓 套 框架 。 输 入 完整 的 HTML 结构 代码 : 


<!--[ 完 整 HTML 框架 ]--> 
<! 一 顶部 一 > 
<div 1d="top"></div> 
<div 1d="topl1"><1mg src="i1mages/bg top.jpg" width="776" height="121" /></div> 
<!-- 主 体 --> 
<div 1d="main"> 
<div 1d="content"> 
<div id="title">Hello World -- 第 一 个 CSS3+DIV 页 面 </div> 
<div class="sub"> 实 例 </div> 
<div class="box"><div class="tl"><div class="tr"><di1v class="bl"><div class="content br"> 


第 4 步 ， 丰 定 结 构 内 容 ， 使 用 <pre> 标 签 显示 代码 内 容 ， 使 用 <a> 设 计 超 链接 文本 ， 整 个 页 面 内 容 


”显示 如 下 ， 代 码 内 容 是 在 网 页 中 居中 显示 红色 字符 Hello World!。 


<pre> 
&lt:!doctype html&et: 
&lt:html&et:; 
&lt:head&et: 
&lt:meta charset=&quot:utf-8&quot:;&et: 
&lt:title&gt:; Hello World&lt:/title&et: 
&lt;style type=&quot;text/css&quot; &et; 
hl { 
color: 考 F0000: 
text-align: center; 
} 
&lt:/style&et;: 
&lt:;/head&et; 
&lt:body&et: 
&lt:hl &egt;Hello World! &lt:/h1 &et: 
&lt:;/body&et: 
&lt:/htmlé&et: 
</pre> 


。 14。 


第 ] 章 CSS3 基础 ES 


</div></div></div></div></div> 

<div id="gotop"><a title=" 跳 到 页 首 " hre 合 "#op"> 返 回 顶部 </a></div> 

</div> | 
</div> 


ee 国会 及 


<div 1d="footer"></div> 


<div 1d="copyright"> Note 
&copy:2017 <a href="#" target=" black" >mysite.cn</a> all rights reserved 
</div> | 


上 面 所 用 的 HTML 框架 代码 典 套 层次 只 有 3 层 ， 其 中 为 了 实现 圆 角 区 域 的 显示 效果 而 单独 典 套 ， 
的 多 层 div 元 素 除 外 。 | 

第 5 步 ， 按 Ctrl+s 快捷 键 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 则 显示 效果 如 图 1.9 所 示 。 现在 
还 没有 定义 CSS 代码 ， 所 以 这 不 是 最 终 效 果 。 


[HE htpynlocalhostindcxhtml -BC I 
{CSS3+DIV]} | 


Hello World -- 芝 一 个 CSS3+DIV 页 面 
一 一 


以 下 代码 是 我 的 第 一 个 CSS3+DIV 页 面 ， 该 页 面 红 色 导 中 显示 字符 此 Hello World!。 


</hi> 


S2017 mysite.cn all rights reserved 


图 1.9 页 面 的 HTML 结构 预览 效果 


第 6 步 ， 编 写 CSS 代码 放 在 一 个 单独 的 文件 中 。 新 建 CSS 文档 ， 保 存 为 style.css， 文 件 扩展 名 
为 .css。 

第 7 步 ， 打 开 index.html 文档 ， 然 后 在 <head> 标 签 内 部 插入 一 个 <link> 标 签 ， 输 入 下 面 代码 ， 导 
入 第 6 步 新 建 的 外 部 样式 表 文件 。 | 


<!--[ 在 网 页 中 链接 外 部 样式 表 文 件 ]--> 
<LINK href="1mages/style.css" type=text/css rel=stylesheet> 


第 8 步 ， 打 开 style css 文档 ， 在 其 中 输入 下 面 CSS 代码 
/* 公 共 属 性 | 


SN 

html {min-width: 776px:} 

/# 页 面 属性 : 边 距 为 0， 字体 颜色 为 黑色 ， 字 体 大 小 为 14px， 行 高 为 字体 大 小 的 1.6 倍 ， 居 中 对 齐 ， 背 景色 
为 天 蓝 色 ， 字 体 为 宋体 等 */ | 

body {margin: Opx: padding: Opx: border: Opx: color: #000: font-size: 14px: line-height: 160%%: text-align: center: 
background: #6D89DD; font-family: ' 宋 体 ',' 新 宋体 ',arial,verdana,sans-serif:} | 

人 # 超 链接 属性 : 无 边 距 、 无 边框 、 无 下 画 线 ， 然 后 定义 正常 状态 下 的 颜色 、 访 问 过 的 颜色 和 鼠标 经 过 时 的 颜 
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(sss 网 页 设计 从 入 门 到 精通 (补课 精 编 版) 


色 并 显示 下 男 线 状 
a {margin: Opx;: padding: Opx; border: Opx:; text-decoration: none:} 
a:link {color: #E66133:} 
aivisited {color: #E66133:} 
a:hover{color: #637DBC:; text-decoration: underline;} 
人 # 预 定义 格式 属性 : 无 首 行 缩 进 ， 浅 灰色 背景 ， 内 边 距 和 外 边 距 为 0， 字 体 颜 色 为 蓝 色 */ 
pre {text-indent: 0; background: #DDDDDD:; padding: 0; margin: 0; color: blue;} 
从 顶部 布局 


人 


#top{width: 776px: margin-rnight: auto; margin-left: auto; padding: 0px: height: 12px: background: url(masges/ 


,bg topl.gib #fff repeat-x left top; overflow: hidden:} 


#topl] {width: 776px: margin-right: auto; margin-left: auto; padding: Opx; height: 121px:} 

谍 主体 布局 

本 __*/ 

诬 外 层 定义 背景 图 像 ， 实 现 麻 点 显示 效果 */ 

#main{width: 776px: margin-right: auto; margin-left: auto:; padding: 1.2em Opx; background: url(images/ 


| bg dotl.glb #fff repeat left top; text-align: left:} 


诬 内 层 定 义 背 景 颜色 为 白色 ， 实 现 中 间 内 容 区 域 遮 六 膝 点 显示 */ 

#content {width: 710px:; margin-right: auto; margin-left: auto; padding: lem: background: #fff:} 
放大 标题 区 域 属性 */ 

#title {font-weight: bold: margin: Opx Opx 0.Sem Opx; padding: 0.Sem Opx 0.Sem lem:; font-size: 24px: color: 


| #00A06B; text-align: left; border-bottom: solid #9EA3C] 2px;} 


上 小 标题 区 域 属性 */ 
.sub {color: #00A06B; font-weight: bold: font-size: 13px: text-align: left: padding: lem 2em 0; background: 


,url(images/0.gif) #fff no-repeat lem 74%;} 


谍 内 容 区 域 显 示 属 性 */ 

.content {text-indent: 2em:; font-slze: 13px: margin-left: 2em: padding: lem 6px:} 

谍 页 内 链接 区 域 属性 */ 

#gotop{width: 100%:; margin: Opx; padding: Opx; background: #fff: height: 2em: font-slze: 12px: text-align: right:} 
从 底部 布局 

和 __*/ 

谍 页 脚 装修 图 */ 

#footer{clear: both: width: 776px; margin-right: auto; margin-left: auto; padding: Opx:; background: url(i1mages/ 


bg _ bottom.aif) #fff repeat left top: text-align: center; height: 39px: color: #ddd:} 


诬 版 权 信 息 */ 
#copyright{width: 776px: margin-right: auto; margin-left: auto; padding: Spx Opx Opx 0px: background: #f{f: 


| text-align: center: height: 60px: line-height: 13px: font-size: 12px: color: #9EAOBB:} 


#copyright a {color: #667EBE:} 

/# 圆 角 特 效 

ES __*/ 

.box {background: url(images/nt.gif) repeat:} 

.t] {background: url(1mages/tl.gif) no-repeat top left:} 

.tr {background: url(1mages/tr.gif) no-repeat top right:} 

-bl {background: url(1mages/bl.gif) no-repeat bottom left:} 
.br {background: url(i1mages/br.gif) no-repeat bottom right:} 


读者 可 能 看 不 懂 上 面 的 CSS 代码 ， 只 需 根 据 上 面 的 提示 简单 了 解 即 可 。 其 中 ，width 属性 用 来 定 
义 宽 度 ;“background: url(images/bg bottom .gif #fff repeat left top;” 规则 用 来 定义 背景 图 像 重 复 铺展 显 
示 ， 其 中 url 指定 背景 图 像 的 地 址 ，repeat 属性 定义 铺展 显示 ，left top 表示 背景 图 像 的 起 始 位 置 为 左 
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上 和 角 。 其 他 属性 上 面 代码 中 己 有 和 解释， 读者 可 以 尝试 阅读 一 下 ， 如 果 读 不 懂 也 没有 关系 ， 和 现在 公 
是 开始 。 相 信 随 着 学 习 的 深入 ， 一 定 会 明白 上 面 代码 的 意思 。 


男 外 ， 本 节 案 例 没有 使 用 CSS3 圆 角 属性 定义 区 块 圆 角 ， 而 是 使 用 传统 方法 进行 设计 ， 二 
初学 者 的 学 习 水 平 ， 后 面 章节 我 们 会 详细 介绍 。 


第 9 步 ， 按 Ctrl+S 快捷 键 保 存 文档 ， 然 后 在 浏览 器 中 再 次 预览 页 面 ， 则 可 以 看 到 最 终 效果 。 | 
MA L0H 
1.5 在 线 练 习 


为 了 帮助 读者 打下 扎实 的 CSS 基础 ， 本 节 提 供 一 些 课外 练习 实例 ， 感 兴趣 的 读者 可 以 扫 码 练习 。 
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章 


CSS3 选择 器 


CSS3 选择 器 在 CSS2.1 选择 器 的 基础 上 新 增 了 部 分 属性 选择 器 和 伪 类 选择 器 ， 减 少 对 
HTML 类 和 JID 的 依赖 ， 使 编写 网 页 代码 更 如 简单 轻松 。 根 据 所 获取 页 面 中 元 素 的 不 同 ， 可 
以 把 CSS3 选择 器 分 为 五 大 类 : 元 素 选 择 器 、 关 系 选 择 器 、 伪 类 选择 器 、 伪 对 象 选 择 器 和 属 


性 选择 器 。 本 章 将 详细 介绍 CSS3 各 类 选择 器 的 使 用 。 


【 学 习 重 点 】 

WV 正确 使 用 CSS 基本 选择 器 。 

WD 灵活 使 用 组 合 选 择 器 。 

六 事 担 属性 选择 器 和 伪 类 选择 器 的 应 用 。 


第 2 章 CSS3 这 择 器 § 


2.1 CSS3 选择 器 概述 


根据 选择 需 结 构 的 不 同 ， 可 以 把 CSS 选择 器 分 为 五 大 类 。 
加 ”元 素 选择 器 ， 如 表 2.1 所 示 。 


选 择 器 
六 
E 
.className 


#IDName 


表 2.1 元 素 选 择 颖 列表 
说 明 
通 配 选 择 器 ， 选 定 所 有 对 象 
标签 选择 器 ， 匹 配 所 有 同类 标签 的 元 素 
类 选择 器 ， 匹 配 class 属性 值 包 含 className 的 元 素 。 注 意 ，E.className 表示 限定 元 素 类 选择 器 
ID 选择 器 ， 匹 配 id 属性 值 等 于 IDName 的 元 素 。 注 意 ，E#TDName 表示 限定 元 素 ID 选择 器 


加 ”关系 选择 器 ， 如 表 2.2 所 示 。 


选 择 器 
上 上 
EF 
E> 
了 十 下 
E~F 


表 2.2 关系 选择 器 列表 
说 。 明 
分 组 选择 器 ， 同 时 匹配 全 和 下 两 个 子 选 择 器 匹配 的 对 象 ， 子 选择 器 之 间 用 去 号 分 隅 
包含 选择 器 ，[ 匹 配 所 有 被 EE 元素 包含 的 元素 
子 选择 器 ， 匹 配 王 元素 的 所 有 子 元 素 上 
相 邻 选择 器 ， 匹 配 紧 贴 在 EE 元 素 之 后 的 元素， 元 素 EE 与 F 必须 同属 一 个 父 级 
兄弟 选择 器 ， 匹 配 E 元素 后 面 的 所 有 兄弟 元 素 F， 元 素 卫 与 下 必须 同属 一 个 父 级 (CSS3 新 增 ) 


四 ”属性 选择 器 ， 如 表 2.3 所 示 。 


选 择 器 
Elatt] 
Elatt="val"] 


Elatt~="val"] 


Elattl="val"] 


Elatt^="val"| 
Elatt$="val"]| 
Elatt*="val"| 


加 ” 伪 选 择 器 ， 包 括 伪 类 选择 器 (如 表 2.4 所 示 ) 和 伪 对 象 选择 器 (如 表 2.5 所 示 ) 。 根 据 执行 ， 
任务 不 同 ， 伪 类 选择 器 义 分 为 动态 伪 类 、 目 标 伪 类 、 语 言 伪 类 、 状 态 伪 类 、 结 构 伪 类 和 全 是 


表 2.3 属性 选择 器 列表 
说 。 明 

匹配 具有 att 属性 的 EE 元 素 。 注 意 ，E 可 以 省 略 ， 如 [cheacked]， 以 下 相同 
匹配 具有 att 属性 且 属 性 值 等 于 val 的 EE 元 素 
匹配 具有 att 属性 且 属 性 值 为 一 用 空格 分 隔 的 字 词 列表 ， 其 中 一 个 等 于 val 的 EE 元 素 。 注 意 ， 
包含 只 有 一 个 值 且 该 值 等 于 val 的 情况 
匹配 具有 att 属性 且 其 值 是 以 val 开头 并 用 连接 符 “-” 分 隔 的 字符 串 的 卫 元 素 。 注 意 ， 如 果 值 
仅 为 val， 也 将 被 选择 
匹配 具有 att 属性 且 属 性 值 为 以 val 开头 的 字符 串 的 EE 元 素 (CSS3 新 增 ) 
匹配 具有 att 属性 且 属 性 值 为 以 val 结尾 的 字符 串 的 EE 元 素 (CSS3 新 增 ) 
匹配 具有 att 属性 且 属 性 值 为 包含 val 的 字符 串 的 EE 元 素 (CSS3 新 增 ) 


伪 类 6 种 。 
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选 择 饥 
E:link 
E:visited 
E:hover 
E:active 
E:focus 
E:lang(fr) 
E:not(s) 
E:root 
E:first-child 
E:last-child 
E:only-child 
E:nth-child(n) 


E:nth-last-child(n) 


E:first-of-type 
E:last-of-type 
E:only-of-type 
E:nth-of-type(n) 
E:nth-last-of-type(n) 
E:empty 

E:checked 


E:enabled 

E:disabled 

E:target 
page :first 
)page :left 
page :right 


选 择 器 
E:first-letter/E::first-letter 
E:first-line/E::first-line 


E:before/E::before 


E:after/E::after 


E::placeholder 


E::selection 


Csss 网 页 设计 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


表 2.4 伪 类 选择 器 列表 
说 。 明 
设置 超 链接 a 在 未 被 访问 时 的 样式 
设置 超 链接 a 在 其 链接 地 址 已 被 访问 时 的 样式 
设置 元 素 在 其 鼠标 悬 停 时 的 样式 
设置 元 素 在 被 用 户 激 活 〈 在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 
设置 对 象 在 成 为 输入 焦点 时 的 样式 
匹配 使 用 特殊 语言 的 EE 元素 
匹配 不 含有 s 选择 符 的 元 素 E〈CSS3 新 增 ) 
匹配 卫 元 素 在 文档 的 根 元 素 。 在 HTML 中 ， 根 元 素 永远 是 HTML (CSS3 新 增 ) 
匹配 父 元 素 的 第 一 个 子 元 素 E〈CSS3 新 增 ) 
匹配 父 元 素 的 最 后 一 个 子 元 素 E《〈CSS3 新 增 ) 
匹配 父 元 素 仅 有 的 一 个 子 元 素 E 《CSS3 新 增 ) 
匹配 父 元 素 的 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 E， 则 选择 符 无 效 《CSS3 新 增 ) 
匹配 父 元 素 的 倒数 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 E， 则 选择 符 无 效 《CSS3 
新 增 ) 
匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 E (CSS3 新 增 ) 
匹配 同类 型 中 的 最 后 一 个 同 级 兄弟 元 素 E (CSS3 新 增 ) 
匹配 同类 型 中 的 唯一 的 一 个 同 级 兄弟 元 素 E 《CSS3 新 增 ) 
匹配 同类 型 中 的 第 n 个 同 级 兄弟 元 素 E 《CSS3 新 增 ) 
匹配 同类 型 中 的 倒数 第 nm 个 同 级 兄弟 元 素 E 《CSS3 新 增 ) 
匹配 没有 任何 子 元 素 (包括 text 节点 ) 的 元 素 E 《CSS3 新 增 ) 
匹配 用 户 界 和 面 处 于 选中 状态 的 元 素 E。 注意 , 用 于 input 的 type 为 radio 与 checkbox 
时 (CSS3 新 增 ) 
匹配 用 户 界面 上 处 于 可 用 状态 的 元 素 E (CSS3 新 增 ) 
匹配 用 户 界面 上 处 于 禁用 状态 的 元 素 E (CSS3 新 增 ) 
匹配 相关 URL 指向 的 EE 元 素 〈CSS3 新 增 ) 
设置 在 打印 时 页 面容 器 第 一 页 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 
设置 页 面容 器 位 于 装订 线 左 边 的 所 有 页 面 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 
设置 页 面容 器 位 于 装订 线 右边 的 所 有 页 面 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 


表 2.5 伪 对 象 选择 器 列表 
说 明 

设置 对 象 内 的 第 一 个 字符 的 样式 。 注 意 ， 仅 作用 于 块 对 象 〈CSS3 新 增 ) 
设置 对 象 内 的 第 一 行 的 样式 。 注 意 ， 仅 作用 于 块 对 象 〈CSS3 新 增 ) 
设置 在 对 象 前 发 生 的 内 容 。 与 content 属性 一 起 使 用 ， 且 必须 定义 content 属性 (CSS3 
新 增 ) 
设置 在 对 象 后 发 生 的 内 容 。 与 content 属性 一 起 使 用 ， 且 必须 定义 content 属性 (CSS3 
新 增 ) 
设置 对 象 文 字 占 位 符 的 样式 〈CSS3 新 增 ) 
设置 对 象 被 选择 时 的 样式 (CSS3 新 增 ) 
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选择 占 模 块 权 威 参考 : http://www.w3.org/TR/css3-selectors/。 


会 提示 : CSS 支持 并 列 使 用 多 个 属性 选择 器 ， 以 匹配 同时 满足 多 个 选择 器 ， 如 blockquote 
[class= quotel[cite| {color:#f00;}. 


< 外 注意 : CSS3 将 伪 对 象 选择 符 前 面 的 单个 冒号 (: ) 修改 为 双 冒 号 (::) ， 用 以 区 别 伪 类 选择 符 ， 
但 以 前 的 写法 仍然 有 效 。 


2.2 元 素 选 择 器 


元 素 选 择 器 包括 标签 选择 器 、 类 选择 占 、ID 选择 器 和 通 配 选 择 嚣 。 


2.2.1 标签 选择 器 


标签 选择 器 也 称 为 类 型 选择 器 ， 它 直接 引用 HTML 标签 名 称 ， 用 来 匹配 同名 的 所 有 标签 。 
回 优点: 使 用 简单， 直接 引用 ， 不 需要 为 标签 添加 属性 。 

缺点 : 匹配 的 范围 过 大 ， 精 度 不 够 。 

因此 ， 一 般 常 用 标签 选择 器 重 置 各 个 标签 的 默认 样式 。 


【示例 】 下 面 示例 统一 定义 网 页 中 段落 文本 的 样式 为 : 段落 内 文本 字体 大 小 为 12px， 字 体 颜色 


为 红色 。 实 现 该 效果 ， 可 以 考虑 选用 标签 选择 器 定义 如 下 样式 。 


pi 
font-size:12px: 此 字体 大 小 为 12px*/ 
color:Ted: 上 字体 颜色 为 红色 */ 


2.2.2 ”类 选择 放 


类 选择 器 以 点 号 〈.) 为 前 级 ， 后 面 是 一 个 类 名 。 应 用 方法 : 在 标签 中 定义 class 属性 ， 然 后 设置 ， 
属性 值 为 类 选择 器 的 名 称 。 

优点 : 能 够 为 不 同 标 签 定 义 相同 样式 ; 使 用 灵活 ， 可 以 为 同一 个 标签 定义 多 个 类 样式 。 

缺点 : 需要 为 标签 定义 class 属性 ， 影 响 文档 结构 ， 操 作 相 对 有 诸 烦 。 

【示例 】 下 面 示例 演示 如 何在 对 象 中 应 用 多 个 样式 类 。 

【操作 步骤 】 


第 1 步 ， 新 建 HTMLS5 文档 ， 保 存 为 testhtml。 
第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
第 3 步 ， 在 <style> 标 签 内 输入 下 面 样式 代码 ， 定 义 3 个 类 样式 : red、underline 和 italic。 


/# 颜 色 类 所 

Ted {color: red:} 人/# 红 色 #/ 
诺 下 面 线 类 */ 

.underline {text-decoration: underline;} 计 下 男 线 */ 
访 斜 体 类 */ 


.ltalic {font-style: 1talic;} 


es。 IO1T。 
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第 4 步 ， 在 段落 文本 中 分 别 引 用 这 些 类 ， 其 中 第 2 段 文本 标签 引用 了 3 个 类 ， 演 示 效 果 如 图 2.1 
”所 示 。 

<p class="underline"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 回 东 流 。</p> 

<p class="red italic underline"> 前 不 断 ， 理 还 乱 ， 是 离愁 。 别 是 一 般 滋味 在 心头 。</p> 


<p class='italic"> 独 目 英 凭栏 ， 无 限 江 山 ， 别 时 容易 见 时 难 。 流 水 落花 春 去 也 ， 天 上 人 间 。</p> 


Note © Cr Cre "A 


撕 犁 识 企 柜 ， 不 刻 江 届 ， 骨 采 做 妈 尼采 落 . 洲 头 崇 伦 戎 去 上 的， 天 上 人 有 后- 


图 2.1 多 类 应 用 效果 


性 上 2.2.3 ID 选择 希 


ID 选择 堪 以 井 号 〈#) 为 前 级 ， 后 面 是 一 个 ID 名 。 应 用 方法 : 在 标签 中 定义 id 属性 ， 然 后 设置 


属性 值 为 ID 选择 器 的 名 称 。 
回 ” 优 点 ;精准 匹配 。 


缺点 : 需要 为 标签 定义 id 属性 ， 影 响 文 档 结 构 ， 相 对 于 类 选择 器 ， 缺 乏 灵活 性 。 
【 示例】 下面 示例 演示 如 何在 文档 中 应 用 ID 选择 器 。 

【操作 步骤】 

第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 <div> 标 签 。 
<divid-"box"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春水 向 东 流 。<jdiv> 


第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
第 3 步 ， 输 入 下 面 样式 代码 ， 为 该 盒子 定义 固定 宽 和 高 ， 并 设置 背景 图 像 ， 以 及 边框 和 内 边 距 大 小 。 


#box {/*ID 样式 */ 
background:url(images/1.png) center bottom; ”/* 定 义 背 景 图 像 并 让 其 居中 、 底 部 对 齐 */ 
height:200px:; 旋回 定 盒子 的 高 度 */ 
width:400px: /# 固 定 盒 子 的 宽度 #/ 
border:solid 2px red: /# 边 框 样式 志 / 
padding: 100px; 诬 增 加 内 边 距 */ 
} 


第 4 步 ， 在 浏览 右 中 预览 ， 效 果 如 图 2.2 所 示 。 


图 2.2 JID 选择 器 的 应 用 


se II 。 


第 2 章 CSS3 这 择 器 


妆 提示 : 不 管 是 类 选择 器 ， 还 是 ID 选择 器 ， 都 可 以 指定 一 个 限定 标签 名 ， 用 于 限定 它们 的 应 用 范 


围 。 例 如 ， 针 对 上 面 示 例 ， 在 ID 选择 器 前 面 增加 一 个 <div> 标 签 ， 这 样 div#box 选择 器 的 


优先 级 会 高 于 #box 选择 器 的 优先 级 。 在 同等 条 件 下 , 浏览 器 会 优先 解析 div#box 选择 器 定 | 


义 的 样式 。 对 于 类 选择 器 ， 也 可 以 使 用 这 种 方式 限制 其 应 用 范围 ， 并 增加 其 优先 级 。 


2.2.4 通 配 选 择 顺 


通 配 选择 器 使 用 星 号 〈*) 表示 ， 用 来 匹配 文档 中 所 有 标签 。 
【 示例】 使 用 下 面 样式 可 以 清除 所 有 标签 的 边 距 。 
* {margin: 0; padding: 0:} 


2.3 关系 选择 器 


当 把 两 个 简单 的 选择 器 组 合 在 一 起 ， 就 形成 了 一 个 复杂 的 关系 选择 器 ,通过 关系 选择 器 可 以 精确 ， 


匹配 HTML 结构 中 特定 范围 的 元 素 。 
2.3.1 包含 选择 器 


包含 选择 器 通过 空格 连接 两 个 简单 的 选择 占 ， 前 面 选择 占 表 示 包 含 的 对 象 , 后 面 选择 器 表示 被 包 ， 


含 的 对 象 。 
优点 : 可 以 缩小 匹配 范围 。 
缺点 : 匹配 范围 相对 较 大 ， 影 啊 的 层级 不 受 限制 。 
【 示例】 启动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 如 下 结构 : 
<div 1d= "wrap"> 
<div 1d="header"> 
<p> 头 部 区 域 段 落 文本 </p> 
</div> 
<div 1d="main"> 
<p> 主 体 区 域 段落 文本 </p> 
</div> 
</div> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 然 后 定义 样式 ， 希 望 实 
现 如 下 设计 目标 。 
回 ”定义 <div id="header"> 包 含 框 内 的 段落 文本 字体 大 小 为 14px。 
定义 <div id="main"> 包 含 框 内 的 段落 文本 字体 大 小 为 12px。 
这 时 可 以 利用 包含 选择 器 来 快速 定义 样式 ， 代 码 如 下 : 
#header p {font-size:14px:} 
#main p {font-size:12px:} 


2.3.2 子 选 择 怖 


子 选 择 器 使 用 尖 角 号 〈>) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 表示 包含 的 父 对 象 ， 后 面 选 择 器 


es。 ID 。 
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< 


表示 被 包含 的 子 对 象 。 
优点 : 相对 于 包含 选择 器 ， 匹 配 的 范围 更 小 ， 从 层级 结构 上 看 ， 匹 配 目标 更 明确 。 
缺点 : 相对 于 包含 选择 器 ， 匹 配 范围 有 限 ， 需 要 熟悉 文档 结构 。 
【 示例】 新 建 网 页 ， 在 <body> 标 签 内 输入 如 下 结构 : 
<h2><span> 席 美人 。 春 伦 秋 月 何 时 了 </span></h2> 
<div><span> 春 花 秋 月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 雕 栏 玉 砌 应 犹 在 ， 只 
是 朱 颜 改 。 问 君 能 有 几 多 悉 ? 恰似 一 江 春 水 向 东 流 。 </span></div> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 在 内 部 样式 表 中 定义 所 有 span 元 素 的 字体 大 小 
为 18px， 再 用 子 选择 器 定义 h2 元 素 包 含 的 span 子 元 素 的 字体 大 小 为 28px。 


span {font-size: 18px;} 
h2 > span {font-size: 28px:} 


在 浏览 占 中 预 完 ， 显 示 效 果 如 图 2.3 所 示 。 


Xx 


ae 
虞 美人 :春花 秋月 何 时 了 


春花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 
回首 月 明 中 。 雕 栏 玉 殉 应 犹 在 ， 只 是 朱 闫 改 。 问 君 能 有 几 多 
优 ? 以 似 一 江 春 水 向 东 流 。 


2.3 子 选 择 器 应 用 
2.3.3” 相 邻 选择 比 


相 邻 选择 器 使 用 加 号 (+) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 指定 相 邻 的 前 面 一 个 元 素 ， 后 面 
选择 器 指定 相 邻 的 后 面 一 个 元 素 。 

优点 : 在 结构 中 能 够 快速 、 准 确 地 找到 同 级 、 相 邻 元 系 。 

缺点 : 使 用 前 需要 熟悉 文档 结构 。 

【示例 】 下 面 示 例 通 过 相 邻 选择 器 快速 匹配 出 标题 下 面相 邻 的 p 元 素 , 并 设计 其 包含 的 文本 居中 
显示 ， 效 果 如 图 2.4 所 示 。 


<style type="text/css"> 

h2, h2 +p {text-align: center;} 

</style> 

<h2> 虞 美人 。 春 伦 秋 月 何 时 了 </h2> 

<p> 李 煜 </p> 

<p> 春 花 秋 月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 </p> 
<p> 雕 栏 玉 砌 应 犹 在 ， 只 是 朱 颜 改 。 问 君 能 有 几 多 悉 ? 恰似 一 江 春 水 向 东 流 。 </p> 


SE 大 交 
虎 美人 .春花 秋月 何 时 了 


李 煤 
奉 论 秋月 何 时 了 ? 生 事 知 多 少 。 小 楼 昨夜 区 东风 ， 故 国 不 堪 回 得 月 明 中 。 
雕 栏 玉 玩 应 犯 在 ， 只 是 未 颜 改 。 问 媳 能 有 几 条 毯 ? 恰似 一 江 坦 水 向 末 闹 。 


2.4 相 邻 选择 器 的 应 用 
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如 果 不 使 用 相 邻 选择 器 ， 和 需要 使 用 类 选择 器 来 设计 ， 这 样 就 相对 麻烦 很 多 。 
2.3.4 兄 种 选择 欠 


| 
兄弟 选择 器 使 用 波浪 符号 (~) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 指定 同 级 的 前 置 元 素 ， 后面 。 全， 
选择 器 指定 其 后 同 级 所 有 风 配 的 元 素 。 Wi 
加 ”优点 : 在 结构 中 能 够 快速 、 准 确 地 找到 同 级 靠 后 的 元 素 。 
加 ”缺点 : 使 用 前 需要 熟悉 文档 结构 ， 匹 配 精度 没有 相 邻 选择 器 具体 。 
【示例 】 以 2.3.3 节 示 例 为 基础 , 添加 如 下 样式 , 定义 标题 后 面 所 有 段落 文本 的 字体 大 小 为 14px， 
字体 颜色 为 红色 。 | 
h2 ~ p {font-size: 14px; colorred:} 


| 
在 浏览 器 中 预览 ， 页面 效果 如 图 2.5 所 示 。 可 以 看 到 兄弟 选择 器 匹配 的 范围 包含 了 相 邻 选择 器 匹 ， 
配 的 元 素 。 


| EE http://localhost/test.html 


广 美 人 . 春 化 秋月 何 时 了 


李 焊 
恰 花 秋 月 何 寺 了 9 往事 知 多 少 。 小 楼 昨夜 叉 东 风 ， 故 国 个 堪 回 旧 月 8 朋 中 。 
阱 栏 玉 初 应 状 在 ， 只 是 牛 新 改 。 问 君 能 有 几 务 称 人 愉 似 一 江 春水 疝 林 流 。 


图 2.5 兄弟 选择 器 的 应 用 
2.3.5 ”分 组 选择 器 


分 组 选择 器 使 用 逗号 〈,) 连接 两 个 简单 的 选择 器 ， 前 面 选 择 器 匹配 的 元 素 与 后 面 选择 器 匹配 的 
元 素 混 合 在 一 起 作为 分 组 选择 器 的 结果 集 。 

优点 : 可 以 合并 相同 样式 ， 减 少 代 码 元 余 。 

缺点 : 不 方便 个 性 管理 和 编辑 。 

【 示例】 下面 示 例 使 用 分 组 选择 器 将 所 有 标题 元 素 统一 样式 。 

hl, h2, h3, h4. h5, h5, h6 { | 
margin: 0: 上 话 清 除 标 题 的 默认 外 边 距 */ 
margin-bottom: 10px;: /*# 使 用 下 边 距 拉 开 标题 距离 妆 

} 


24 属性 选择 器 4 


属性 选择 器 是 根据 标签 的 属性 来 匹配 元 素 ， 使 用 中 括号 进行 标识 : 
[属性 表达 式 ] 


CSS3 包括 7 种 属性 选择 器 形式 ， 下 面 结合 示例 具体 说 明 。 
【 示例】 下面 设 计 一 个 简单 的 图 片 灯 箱 导 航 示 例 。 其 中 HTML 结构 如 下 : 
<div class="pic box"> 
<Img src="i1mages/bgl.jpg" /> 四 
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<div class="nav"> 
<a href—="#1" class="links ltem first" title="w3cplus" target—=" blank" 1d="first" >1</a> 
<a href—="#2" class="links active item" title="test website" target=" blank" lange="zh">2</a> 
<a href—="#3" class="links item" title="this ls a link" lang="zh-cn">3</a> 
<a href—="#4" class="links item" target=" balnk" lang="zh-tw">4</a> 
<a href="#5" class="links item" title="zh-cn">5</a> 
<a href—"#6" class="links item" title="website link" lang="zh">6</a> 
<a href="#7" class="links item" title="open the website" lang="cn">7</a> 
<a href="#8" class="links item" title="close the website" lange="en-zh">8</a> 
<a href—="#9" class="links item" title="http://www.baidu.com">9</a> 
<a href—="#10" class="links item last" 1d="last">10</a> 

</div> 

</div> 


使 用 CSS 适当 美化 ， 具 体 样 式 代码 请 参考 本 节 示 例 源 代码 ， 初 始 预览 效 末 如 图 2.6 所 示 。 


.es nowoono- -scjsc x| 


De606000696g0 


图 2.6 设计 的 灯箱 广告 效果 图 
1. Erattr] 
选择 具有 attr 属性 的 EE 元素 。 例 如 : 
.nav alid] {background: blue; color:yellow:font-weight:bold:} 
上 面 代码 表示 选择 div.nav 下 所 有 带 有 id 属性 的 a 元素， 并 在 这 个 元 素 上 使 用 背景 色 为 蓝 色 ， 前 


景色 为 黄色 ， 字 体 加 粗 的 样式 。 对 照 上 面 的 HTML 结构 ， 不 难 发 现 ， 只 有 第 一 个 和 最 后 一 个 链接 使 
用 了 id 属性， 所 以 选中 了 这 两 个 a 元素 ， 效 果 如 图 2.7 所 示 。 


也 可 以 指定 多 属性 : 
.nav a[hrefl[title] {background: yellow: color:green;} 


上 面 代码 表示 选择 divnav 下 同时 具有 href 和 title 两 个 属性 的 a 元 素 ， 效 果 如 图 2.8 所 示 。 
ooe06600600 909090909009000 


图 2.7 属性 快速 匹配 图 2.8 多 属性 快速 匹配 


2. Elattr="value"| 
选择 具有 attr 属性 且 属 性 值 等 于 value 的 EE 元素。 例如 : 
.nav alid="first"] {background: blue: color:yellow:font-welght:bold:} 


es。 I0。 
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上 面 代码 表示 选中 divnav 中 的 a 元 素 , 这 个 元 素 有 一 个 id=-"first" 属 性 值 ,预览 效果 如 图 2.9 所 示 。 
E[attr=-"value"] 属 性 选择 器 也 可 以 多 个 属性 并 写 ， 进 一 步 缩小 选择 范围 ， 用 法 如 下 : 
.nav a[href="#1"|[title] {background: yellow; color:green;} | 


预览 效果 如 图 2.10 所 示 。 国安 三 
O00O0060008600 G0000600000 
图 2.9 属性 值 快速 匹配 图 2.10 多 属性 值 快 速 匹 配 


3. Elattr~="value"| 


选择 具有 attr 属性 且 属 性 值 为 一 用 空格 分 隅 的 字 词 列表 ， 其 中 一 个 等 于 value 的 EE 元 素 。 包 含 只 
有 一 个 值 且 该 值 等 于 val 的 情况 。 例 如 : 


.nav altitle~="website"|{background:orange:color:green;} 


上 面 代码 表示 在 divnav 下 的 a 元 素 的 tide 属性 中 , 只 要 其 属性 值 中 含有 website 这 个 词 就 会 被 选 
择 ， 结 果 “2”“6”“7”“8” 这 4 个 a 元 素 的 title 中 都 含有 ， 所 以 被 选中 ， 如 图 2.11 所 示 。 | 


4. Elattr^="value"| 
选择 具有 attr 属性 且 属 性 值 为 以 value 开头 的 字符 串 的 EE 元素。 例如 : 


.nav altitle^="http://"] {background:orange:;color:ereen;} 
.nav altitle^="mailto:"|{background:green:;color:orange;} 


上 面 代码 表示 选择 含有 title 属性 ， 并 且 属 性 值 以 http:// 和 mailto: 开 头 的 所 有 a 元 素 ， 匹 配 效果 如 | 
图 2.12 所 示 。 | 


Coe00000e@0n 


图 2.11 属性 值 局 部 词 匹 配 图 2.12 ”匹配 属性 值 开头 字符 串 的 元 尔 
3. Elattr$="value"]| 
选择 具有 attr 属性 且 属 性 值 为 以 value 结尾 的 字符 串 的 王 元 素 。 例 如 ， 
.nav a[lhref$="png"|{background:orange;color:green;} 
上 面 代码 表示 选择 div.nav 中 元 素 有 href 属性 且 属 性 值 以 png 结尾 的 a 元 素 。 
6. Elattr*="value"| 
选择 具有 attr 属性 且 属 性 值 为 包含 value 的 字符 串 的 E 元素。 例如 : 
.nav altitle*="site"] {backeround:black:color:white:} 
上 面 代 码 表示 选择 div.nav 中 title 属性 值 中 有 site 字符 串 的 a 元 素 。 上 面 样式 的 预览 效果 如 图 2.13 

所 示 。 

7. Elattr|="value"] 


选择 具有 attr 属性 且 其 值 是 以 value 开头 ， 并 用 连接 符 “-” 分 隔 的 字符 串 的 EE 元素; 如 果 值 仅 为 
value， 也 将 被 选择 。 例 如 : 


.nav allang|="zh"|{background:gray:color:yellow:} 


“I 


所 示 。 
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上 面 代码 会 选中 div.nav 中 lang 属性 等 于 zh 或 以 砌 -开头 的 所 有 a 元素， 如 图 2.14 所 示 。 


OOOOO000000 ooeooo06o9n0 


图 2.13 ”匹配 属性 值 中 的 特定 子 串 图 2.14 匹配 属性 值 开 头 字符 串 的 元 素 


2.5 伪 类 选择 器 


伪 类 选择 器 是 一 种 特殊 的 类 选择 器 , 它 的 用 处 就 是 可 以 对 不 同 状态 或 行为 下 的 元 素 定 义 样 式 ， 这 


” 些 状态 或 行为 是 无 法 通过 静态 的 选择 器 匹配 的 ， 具 有 动态 特性 。 
2.5.1 伪 选 择 怖 概述 


伪 选 择 器 包括 伪 类 选择 器 和 伪 对 象 选择 器 ， 伪 选择 器 能 够 根据 元 素 或 对 象 的 特征 、 状 态 、 行 为 进 
行 匹配 。 
伪 选 择 器 以 冒号 〈:) 作为 前 绥 标 识 符 。 冒 号 前 可 以 添加 限定 选择 符 ， 限 定 伪 类 应 用 的 范围 ， 冒 


号 后 为 伪 类 和 伪 对 象 名 ， 冒 号 前 后 没有 空格 。 


CSS 伪 类 选择 器 有 两 种 用 法 。 


1. 单纯 式 
E:pseudo-class {property:value} 


其 中 下 为 元 素 , pseudo-class 为 伪 类 名 称 , property 为 CSS 的 属性 , value 为 CSS 的 属性 值 。 例 如 : 
a:link {color:red;} 

2. 混用 式 

E.class:pseudo-class{property:value} 

其 中 .class 表示 类 选择 符 。 把 类 选择 符 与 伪 类 选择 符 组 成 一 个 混合 式 的 选择 器 ， 能 够 设计 更 复杂 


”的 样式 ， 以 精准 匹配 元 素 。 例 如 : 


a.selected:hover {color: blue:} 


CSS3 支持 的 伪 类 选择 器 具体 说 明 如 表 2.4 所 示 ，CSS3 支持 的 伪 对 象 选择 器 具体 说 明 如 表 2.5 


由 于 CSS3 伪 选 择 器 众多 ， 下 面 仅 针对 CSS3 中 新 增 的 伪 类 选择 器 进行 说 明 ， 其 他 选择 器 请 读者 
参考 CSS3 参考 手册 详细 了 解 。 


5 2.5.2 ”结构 伪 类 


结构 伪 类 是 根据 文档 结构 的 相互 天 系 来 匹配 特定 的 元 素 , 从 而 减少 文档 元 素 的 class 属性 和 ID 属 


”性 的 无 序 设置 ， 使 得 文档 更 加 简洁 。 


结构 伪 类 形式 多 样 ， 但 用 法 固定 ， 以 便 设 计 各 种 特殊 样式 效果 。 结 构 伪 类 主要 包括 下 面 几 种 。 
回 :first-child: 第 一 个 子 元 素 。 
加 ”:last-child: 最 后 一 个 子 元 素 。 


es。 II8B 。 


:only-child: 唯一 子 元 素 。 


加 网 网 加 册 辐 印加 辐 


:empty: 空 元 素 。 


【示例 1 下面 示例 设计 排行 榜 栏目 列表 样式 ,设计 效果 如 图 2.15 所 示 。 在 列表 框 中 为 每 个 列表 
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:nth-child0: 按 正 序 匹 配 特 定子 元 素 。 

:nth-last-child0: 按 倒 序 匹 配 特 定子 元 素 。 

:nth-of-type0: 在 同类 型 中 匹配 特定 子 元 素 。 
:nth-last-of-type0: 按 倒序 在 同类 型 中 匹配 特定 子 元 素 。 
:first-of-type: 第 一 个 同类 型 子 元 素 。 

:last-of-type: 最 后 一 个 同类 型 子 元 素 。 


:only-of-type: 同类 型 的 唯一 子 元 素 。 


项 定义 相同 的 背景 图 像 。 
全 
双 周 热门 推荐 
国 送 姑 千里 半 活 一 另 
加 旅行 的 吉祥 
团 南 吊 亚 去 ， 靖 神 永 存 
E83 愉 沂 痪 灯 械 
8 阿 和 及 利 王 天 高 之 年 
6 白菜 汐 内 检 益 乌 
四 ee 人 入 
国 我 |]， 只 矢 在 中 上 相 还 
图 2.15 排行 榜 栏 目 样式 
设计 列表 结构 如 下 : 
<div 1d="wrap"> 
<ul 1d="container"> 
<]i><a hre 伟 "加 > 送 君 千 里 终 须 一 别 </a></li> 
<]i><a hre 伍 "#"> 旅 行 的 意义 </a></li> 
<]i><a hre 伍 "#"> 南 师 虽 去 ， 精 神 永存 </a></li> 


<]i><a hre 合 "如 > 榴莲 精米 粒 </a></i> 

<]i><a hre 伟 " 扩 > 阿 尔 及 利 亚 天 命 之 年 </a></li> 
<]i><a hre 伟 "#'> 白 菜 鸡 肉 粉丝 包 </a>< 沾 > 

<]i><a hre 伍 "#">《 展 望 塔 上 的 杀人 》</a></l> 
<]i><a hre 伍 "#"> 我 们 ， 只 会 在 路 上 相遇 </a></li> 


</ul> 
</div> 


设计 的 列表 样式 请 参考 本 节 示 例 源 代码 。 下 面 以 示例 1 为 基础 分 析 结 构 伪 类 选择 器 的 用 法 。 


1. :first-child 


【示例 2】 设 计 第 一 个 列表 项 前 
使 用 :first-child 匹配 ， 代 码 如 下 : 


#wrap li:first-child { 
background-position:2px 10px; 
font-weight:bold; 

} 


的 图 标 为 1， 且 字体 加 粗 显示 。 
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2. :last-child 


【示例 3】 单 独 给 最 后 一 个 列表 项 定义 样式 。 
使 用 :last-child 来 匹配 ， 代 码 如 下 : 


#wrap li:last-child {background-position:2px -277px;} 

显示 效果 如 图 2.16 所 示 。 

3. :nth-child() 

:nth-child0 可 以 选择 一 个 或 多 个 特定 的 子 元 素 。 该 函数 有 多 种 用 法 : 


:nth-child(length): /# 参 数 是 具体 数字 类 

:nth-child(n):; /# 参 数 是 n，n 从 0 开始 计算 */ 
:nth-child(n*length) /*n 的 倍数 选择 ，n 从 0 开始 计算 */ 
:nth-child(n+length): /# 选 择 大 于 或 等 于 length 的 元 素 */ 
:nth-child(-n+length) /# 选 择 小 于 或 等 于 length 的 元 素 */ 
:nth-child(n*length+1); 诺 表 示 隅 几 选 一 */ 


在 nth-child0 函 数 中 ， 参 数 length 和 n 均 为 整数 。 
:nth-childO 可 以 定义 值 ， 值 可 以 是 整数 ， 也 可 以 是 表达 式 ， 用 来 选择 特定 的 子 元 素 。 
【示例 4】 下 面 6 个 样式 分 别 匹 配 列表 中 第 2 一 7 个 列表 项 ， 并 分 别 定义 它们 的 背景 图 像 立轴 坐 
标 位 置 ， 显 示 效 果 如 图 2.17 所 示 。 


#wrap li:nth-child(2) {background-position: 2px -31px:} 
#wrap li:nth-child(3) {backeground-position: 2px -72px:} 
#wrap li:nth-child(4) {background-position: 2px -113px;} 
#wrap li:nth-child($) {backeground-position: 2px -154px:;} 
#wrap li:nth-child(6) {background-position: 2px -19Spx:} 
#wrap li:nth-child(7) {backeground-position: 2px -236px:} 


Cs -http://ocalho.. ~ 8 ,we + http://localho.. v 如 0 
双 周 热门 淮 荐 双 周 热门 准 荐 

国运 君 寺 里 终 须 一 别 国 送 君 千里 终 及 一 别 

旅行 的 意义 四 旅行 的 意义 

加 再 是 品 去 , 精神 永存 再 师 皇 去 ,精神 永存 

相 汗 撒 米 央 朴 连 构 米 媒 


国 阿尔 及 刊 亚 天 命 之 年 国 阿尔 及 刊 亚 天 命 之 年 


白 莱 鸡肉 桶 丝 包 [四 自 莱 鸡 内 粉丝 包 
# 甘 望 夫 上 且 杀 人 涩 长 攻 望 搭 上 的 示人 
四 我们， 只 会 在 路 上 相遇 四 我们， 只 会 在 路 上 相遇 


图 2.16 设计 最 后 一 个 列表 项 样式 图 2.17 设计 每 个 列表 项 样式 


< 入 注意 : :nth-child0O 函 数 的 参数 不 能 引用 负 值 ， 如 li:nth-child(-3) 是 不 正确 的 使 用 方法 。 


(1) :nth-child(n) 
在 :nth-child(n) 中 ，n 是 一 个 简单 的 表达 式 ， 其 取 值 从 0 开始 计算 ， 到 什么 时 候 结 束 是 不 确定 的 ， 
须 结合 文档 结构 而 定 ， 如 果 在 实际 应 用 中 直接 这 样 使 用 ， 将 会 选中 所 有 子 元 素 。 
在 示例 4 中 ， 如 果 在 i 中 使 用 :nth-child(n)， 那 么 将 选中 所 有 的 元素 : 


#wrap li:nth-child(n) {text-decoration:underline;} 
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这 个 样式 类 似 于 : 

#wrap li {text-decoration:underline;} 

其 实 ，nth-child0 是 这 样 计算 的 : | 

n-0 表示 没有 选择 元 素 。 ”全 

n=1 表示 选择 第 1 个 1i。 | 

n=2 表示 选择 第 2 个 li。 Note 

依 此 类 推 ， 这 样 下 来 就 选中 了 所 有 的 li。 

(2) :nth-child(2n) 

:nth-child(2n) 是 :nth-child(n) 的 一 种 变 体 , 使 用 它 可 以 选择 n 的 倍数 (其 中 2 可 以 换 成 需要 的 数字 ， 

分 别 表示 不 同 的 倍数 )。 


#wrap li:nth-child(2n) {font-weight:bold:} 


四 我 们 ， 只 会 在 路 上 相遇 


(3) :nth-child(2n-1) 
:nth-child(2n-1) 选 择 器 是 在 :nth-child(2n) 基 础 上 演变 来 的 ， 既 Es 全 十 项 
然 :nth-child(2n) 表 示 选 择偶 数 ， 那 么 在 它 的 基础 上 减 去 1 就 变 成 选 。 国富 役 计 偶 阔 行列 表 珊 样式 
择 奇 数 。 
#wrap li:nth-child(2n-1) {tont-welght:bold:} 
等 价 于 : 
#wrap li:nth-child(odd) {font-weight:bold:} 
其 实现 过 程 如 下 : 
当 n=0， 则 2n-1=-1， 表 示 没 有 选中 任何 元 素 。 
当 n=1， 则 2n-1=1， 表 示 选 择 第 1 个 li。 
当 n=2， 则 2n-1=3， 表 示 选 择 第 3 个 li。 
依 此 类 推 。 | 
奇数 效果 还 可 以 使 用 :nth-child(2n+1) 和 :nth-child(odd) 来 实现 。 
(4) :nth-child(n+5) 
:nth-child(n+5) 选 择 器 是 从 第 5 个 子 元 素 开始 选择 。 
li:nth-child(n+5) {font-weight:bold;:} 


其 实现 过 程 如 下 : 
当 n=0， 则 n+5=5， 表 示 选 择 第 5 个 li。 


等 价 于 : | 
#wrap li:nth-child(even) {font-weight:bold;} | 

HA 六 Ee x 
ese ld ew sels| 

其 实现 过 程 如 下 : 现下 

当 n=0， 则 2n=0， 表 示 没 有 选中 任何 元 素 。 四 送 下 和 里 并 舌 - 别 

当 n=1， 则 2n=2， 表 示 选 择 第 2 个 1i。 oni | 

_ 国 疝 师 号 去 ， 靖 神 永存 | 

当 n=2,， 由 2n 三 4， 表示 选择 第 4 个 ]1。 权 竺 桥 米 楼 

依 此 类 推 。 国 阿尔 及 刊 亚 天 命 之 年 

如 果 是 20， 则 与 使 用 even 命名 class 定义 样式 所 起 到 的 效果 是 pr | 

一 样 的 划 夺 钮 檬 上 有 的 村 小 
| 
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当 n=1， 则 n+5=6， 表 示 选 择 第 6 个 1i。 

依 此 类 推 。 

可 以 使 用 这 种 方法 设置 需要 开始 选择 的 元 素 位 置 ， 也 就 是 说 更 改 数字 ， 可 更 改 起 始 位 置 。 
(5) :nth-child(-n+5) 

:nth-child(-n+5) 选 择 器 刚好 和 :nth-child(n+5) 选 择 器 相反 ， 它 选择 第 5 个 元 素 前 面 的 子 元 素 。 
li:nth-child(-n+$) {font-weight:bold;} 


其 实现 过 程 如 下 : 

当 n=0， 则 -n+5=5， 表 示 选 择 第 5 个 1i。 

当 n=1， 则 -n+5=4， 表 示 选 择 第 4 个 1i。 

当 n=2， 则 -n+5=3， 表 示 选 择 第 3 个 1i。 

当 n=3， 则 -n+5=2， 表 示 选 择 第 2 个 li。 

当 n=4， 则 -n+5=1， 表 示 选 择 第 1 个 li。 

当 n=5， 则 -n+5=0， 表 示 没 有 选择 任何 元 素 。 

(6) :nth-child(Sn+1) 

:nth-child(5n+1) 选 择 器 是 实现 隔 几 选 一 的 效果 。 如 果 是 隔 三 选 一 ， 则 定义 的 样式 如 下 : 
li:nth-child(3n+1) {font-weight:bold;} 


其 实现 过 程 如 下 : 

当 n=0， 则 3n+1=1， 表 示 选 择 第 1 个 li。 

当 n=1， 则 3n+1=4， 表 示 选 择 第 4 个 li。 

当 n=2， 则 3n+1=7， 表 示 选 择 第 7 个 1i。 

设计 效果 如 图 2.19 所 示 。 
EH- hecho.. sc] s 
双 周 热门 推荐 
加 送 君 千里 终 须 一 别 
四 旅行 的 意义 
两 师 主 去 ， 精神 永 在 
榴 竺 酉 米 柑 
国 阿尔 及 利于 天命 之 年 
加 白 荡 8 内 挫 丝 包 
枚 用 萌 长 上 的 条 人 省 


四 我 们 ， 只 会 在 路 上 相遇 


图 2.19 设计 隅 三 选 一 行列 表 项 样式 
4. :nth- last-child() 
:nth-last-child0 选 择 器 与 :nth-childO0 相 似 ， 但 作用 与 :nth-child 不 一 样 ，:nth-last-childO 是 从 最 后 一 


“个 元 素 开始 计算 ， 来 选择 特定 元 素 。 


li:nth-last-child(4) {tont-welght:bold:} 
上 面 代码 表示 选择 倒数 第 4 个 列表 项 。 


其 中 :nth-last-child(1) 和 :last-child 所 起 作用 是 一 样 的 ， 都 表示 选择 最 后 一 个 元 素 。 
另外 ，:nth-last-child0 与 :nth-childO 用 法 相同 ， 可 以 使 用 表达 式 来 选择 特定 元 素 ， 下 面 来 看 几 个 特 


， 殊 的 表达 式 所 起 的 作用 。 
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:nth-last-child(2n) 表 示 从 元 素 后 面 计算 ， 选 择 的 是 偶数 个 数 ， 而 从 前 面 来 说 就 是 选择 元 素 的 奇数 


个 数 ， 与 :nth-child(2n+1)、:nth-child(2n-1)、:nth-child(odd) 所 起 的 作用 是 一 样 的 。 如 : 
li:nth-last-child(2n) {font-weight:bold:} 
li:nth-last-child(even) {font-weight:bold:} 
等 价 于 : 
li:nth-child(2n+1) {font-weight:bold;} 
li:nth-child(2n-1) {font-weight:bold:} 
li:nth-child(odd) {font-weight:bold;} 


:nth-last-child(2n-1) 选 择 器 刚好 与 :nth-last-child(2n) 相 反 ， 它 从 后 面 计算 选择 的 是 奇数 ， 而 从 前 面 ， 


计算 选择 的 就 是 偶数 位 了 ， 如 : 
li:nth-last-child(2n+1) {font-weight:bold;} 
li:nth-last-child(2n-1) {font-weight:bold:} 
li:nth-last-child(odd) {font-weight:bold:} 
等 价 于 : 
li:nth-child(2n) {font-weight:bold;} 
li:nth-child(even) {font-weight:bold:} 


总 之 ，:nth-lastchildO0 和 nth-child0 使 用 方法 是 一 样 的 ， 只 不 过 :nth-child0 是 从 元 素 的 第 一 个 开始 


计算 ， 而 :nth-last-child0 是 从 元 素 的 最 后 一 个 开始 计算 ， 它 们 的 计算 方法 都 是 一 样 的 。 
$5. :nth-of-type() 


:nth-of-typeO 类 似 于 :nth-child0， 不 同 的 是 它 只 计算 选择 器 中 指定 的 那个 元 素 。:nth-of-typeO 选 择 


句 用 来 定位 元 素 中 包含 好 多 不 同类 型 的 子 元 素 时 很 有 用 处 。 


【示例 5】 在 div#wrap 中 有 很 多 p、li、img 等 元 素 ， 但 现在 只 需要 选择 p 元 素 ， 并 让 它 每 隔 一 ， 


个 p 元素 束 有 不 同 的 样式 ， 那 就 可 以 人 简单 地 写成 : 
div#wrap p:nth-of-type(even) {font-weight:bold:} 


其 实 ， 这 种 用 法 与 :nth-child0 是 一 样 的 ， 也 可 以 使 用 :nth-child0 的 表达 式 来 实现 ， 唯 一 个 同 的 ， 


是 :nth-of-type 指定 了 元 素 的 类 型 。 
6. :nth-last-of-type() 


:nth-last-of-type() 与 :nth-last-childO 用 法 相同 ， 但 它 指定 了 子 元 素 的 类 型 。 除 此 之 外 ， 语 法 形式 和 | 


用 法 基本 相同 。 
7. :first-of-type 和 :last-of-type 


:first-of-type 和 :last-of-type 选择 器 类 似 于 :first-child 和 :last-child, 不 同 之 处 就 是 它们 指定 了 元 素 的 | 


类 型 。 
8. :only-child 和 :only-of-type 
:only-child 表示 一 个 元 素 是 它 的 父 元 素 的 唯一 子 元 素 。 
【示例 6】 在 文档 中 设计 如 下 HTML 结构 。 


<div class="post"> 
<p> 第 一 段 文本 内 容 </p> 
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<p> 第 二 段 文本 内 容 </p> 
</div> 
<div class="post"> 

<p> 第 三 段 文本 内 容 </p> 
</div> 


如 果 需 要 使 divpost 只 有 一 个 p 元 素 时 ， 改 变 p 的 样式 ， 可 以 使 用 :only-child 选择 器 来 实现 。 
.post p {font-welight:bold;} 

.post p:only-child {background: red:} 

此 时 大 divpost 只 有 一 个 子 元 素 p， 那 么 它 的 背景 色 将 会 显示 为 红色 。 

:only-of-type 表示 一 个 元 素 包 含 很 多 个 子 元 素 ， 而 其 中 只 有 一 个 子 元 素 是 唯一 的 ， 那 么 使 用 这 种 


“选择 方法 就 可 以 选中 这 个 唯一 的 子 元 素 。 例 如 : 


<div class="post"> 
<div> 子 块 一 </div> 
<p> 文 本 段 </p> 
<div> 子 块 二 </div> 
</div> 


如 果 只 想 选 择 上 面 结构 块 中 的 p 元 系 ， 就 可 以 这 样 写 : 
.post p:only-of-type {background-color:red:} 


9. :empty 


:empty 用 来 选择 没有 任何 内 容 的 元 素 ， 这 里 没有 内 容 指 的 是 一 点 内 容 都 没有 ， 包 括 空 格 。 
【示例 7】 以 下 有 3 个 段落 ， 其 中 一 个 段落 什么 都 没有 ， 完 全 是 空 的 : 
<div class="post"> 
<p> 第 一 段 文本 内 容 </p> 
<p> 第 二 段 文本 内 容 </p> 
</div> 
<div class="post"> 
<p> </p> 
</div> 
如 果 想 设计 这 个 p 不 显示 ， 那 就 可 以 这 样 来 写 : 


.post p:empty {display: none:} 


:not0 表 示人 否定 选择 器 ， 即 过 滤 掉 not0 函 数 匹 配 的 特定 元 素 。 
【示例 】 下 面 示例 为 页 面 中 所 有 段落 文本 设置 字体 大 小 为 24px， 然 后 使 用 :not(.author) 排 除 第 一 


”上段 文本 ,设置 其 他 段落 文本 的 字体 大 小 为 14px， 显 示 效 果 如 图 2.20 所 示 。 


<style type="text/css"> 

p {font-size: 24px:} 

p:not(.author) {font-size: 14px;} 
</style> 

<h2> 虞 美人 。 春 花 秋 月 何 时 了 </h2> 
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<p class="author"> 李 煜 </p> | 
<p> 春 花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 </p> | 
<p> 雕 栏 玉 砌 应 犹 在 ， 只 是 朱 颜 改 。 问 君 能 有 几 多 悉 ? 恰似 一 江 春水 向 东 流 。 </p> | 


SE A 全、 
谨 美人 .春花 秋月 何 时 了 
李 烛 


春花 秋月 何 时 了 ? 往事 知 和 多 少 。 小 楼 昨夜 只 东风 ， 故 国 不 堪 回 首 月 明 中 。 
雕 栏 王 砌 应 犹 在 ， 只 是 朱 颜 发。 问 君 能 有 几 多 黎 ? 恰似 一 江 春 水 同 东 流 。 


图 2.20 否定 伪 类 的 应 用 
2.5.4 ”状态 盆 类 


CSS3 包含 3 个 UI 状态 伪 类 选择 器 ， 人 简单 说 明 如 下 。 

: enabled: 匹配 指定 范围 内 所 有 可 用 UI 元素 。 
:disabled: 匹配 指定 范围 内 所 有 不 可 用 UI 元 素 。 

:checked: 匹配 指定 范围 内 所 有 可 用 UI 元 素 。 
【示例 】 下 面 示例 设计 一 个 简单 的 登录 表单 ， 效 果 如 图 2.21 所 示 。 在 实际 应 用 中 ， 当 用 户 登 录 ， 
完毕 ,不 妨 通过 脚本 把 文本 框 设 置 为 不 可 用 (disabled="disabled") 状态 ， 这 时 可 以 通过 :disabled 选择 ， 
器 让 文本 框 显示 为 灰色 ， 以 告诉 用 户 该 文本 框 已 不 可 用 ， 这 样 就 不 用 设计 “不 可 用 ”样式 类 ， 并 把 该 
类 添加 到 HTML 结构 中 。 | 


全 "BAS 口 hitp://localhostiin ~ 0 localhost ] 
1 
| 
1 

用 户 名 | 


EL 


密码 


本 本 | 
| 


ET 


图 2.21 设计 登录 表单 样式 | 


【操作 步骤 】 
第 1 步 ， 新 建 一 个 文档 ， 在 文档 中 构建 一 个 简单 的 登录 表单 结构 。 
<form action="#"> 


<]abel for="username"> 用 户 名 </label> 

<Input type="text" name="username" 1d="username" /> 
<input type="text" name='"usemamel" disabled="disabled" value=" 不 可 用 " /> | 
<]label for="password"> 密 码 </label> | 
<Inpnut type="password" name="password" 1d="password" /> 
<input type="password" name="password1" disabled="disabled" value=" 不 可 用 " /> 
<input type="submit" value=" 提 交 " /> 

</form> 
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ER 
在 这 个 表单 结构 中 ， 使 用 HTML 的 disabled 属性 分 别 定义 两 个 不 可 用 的 文本 框 对 象 。 
第 2 步 ， 内 建 一 个 内 部 样式 表 ， 使 用 属性 选择 器 定义 文本 框 和 密码 域 的 基本 样式 。 


input[type="text"], mput[type="password"| { 
border: 1px solid #0f0:; 
width: 160px:; 
height:22px; 
padding-left:20px: 
margin:6px 0; 
line-height:20px;} 


第 3 步 ， 利 用 属性 选择 器 ， 分 别 为 文本 框 和 密码 域 定 义 内 花 标识 图 标 。 


input[type="text"| {background:url(1mages/name.gif) no-repeat 2px 2pX:} 
input[type="password"| {background:url(1mages/password.gif) no-repeat 2px 2px;} 


第 4 步 , 使 用 状态 伪 类 选择 器 , 定义 不 可 用 表单 对 象 显示 为 灰色 , 以 提示 用 户 该 表单 对 象 不 可 用 。 


Input[type= "text"]:disabled { 
backeground:#ddd url(1mages/namel] .gif) no-repeat 2px 2px; 
border: 1px solid #bbb:} 

input[type="password"|:disabled { 
backeround:#ddd url(1mages/password1.g1f) no-repeat 2px 2px; 
border: 1px solid #bbb;} 


3 加。 2.5.5 目标 伪 类 


| 目标 伪 类 选择 器 类 型 形式 如 E:target， 它 表示 选择 匹配 三 的 所 有 元 素 ， 且 匹配 元 素 被 相关 URL 指 
， 则 。 该 选择 器 是 动态 选择 器 ， 只 有 当 存 在 URL 指向 该 匹配 元 素 时 ， 样 式 效 果 才 有 效 。 

| 【示例 】 下 面 示 例 设 计 当 单 击 页 面 中 的 锚 点 链接 ， 跳 转 到 指定 标题 位 置 时 ， 该 标题 会 目 动 高 亮 显 
”不 ， 以 提醒 用 户 当 前 跳 转 的 位 置 ， 效 果 如 图 2.22 所 示 。 


<style type="text/css"> 

谍 设 计 导 航 条 固定 在 窗口 右上 角 位 置 显示 */ 

hl {position:fixed; right: 12px; top:24px:} 

谍 让 锚 点 链接 堆 营 显示 */ 

hl a{display:block:} 

虚设 计 锚 点 链接 的 目标 高 亮 显 示 */ 

h2:target {background:hsla(93,96%,62%,1.00):} 

</style> 

| <hl1><a hre 伟 "元 1"> 图 片 1</a> <a hre 仁 "#p2"> 图 片 2</a> <a hre 舍 "元 3"> 图 片 3</a> <a hre 舍 "元 4"> 图 片 4</a> 
</hl> 
<h2 1d="p1"> 图 片 1</h2> 

<p><1img src="1mages/1.jpg" /></p> 
<h2 id="p2"> 图 片 2</h2> 
<p><Img src="1mages/2.jpg" /></p> 
<h2 id="p3"> 图 片 3</h2> 
<p><Img src="i1mages/3.jpg" /></p> 
<h2 id="p4"> 图 片 4</h2> 
<p><lmg src="1mages/4.jpg" /></p> 
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< 外 | 局 http://localhost:3080/mysite/index.htmlzp2 


图 2.22 目标 伪 类 样式 应 用 效果 ft 
2.5.6 ”动态 伪 类 ee 


动态 伪 类 是 一 类 行为 类 样式 ， 只 有 当 用 户 与 页 面 进行 交互 时 有 效 。 包 括 以 下 两 种 形式 。 ”视频 讲解 
加 ” 锁 点 伪 类 ， 如 :link、:visited。 | 
回 ”行为 伪 类 ， 如 :hover、:active 和 :focus。 | 

【示例 】 下 面 示例 使 用 动态 伪 类 选择 器 设计 一 组 3D 动态 效果 的 按钮 样式 ， 效 果 如 图 2.23 所 示 。 ， 


Xx 


| © @ npcanosts0s - ao nN 大 | 


1 

sg | 
1 

| 

1 


| 
2.23 ”设计 3D 按钮 样式 | 


【操作 步骤 】 
第 1 步 ， 设 计 一 个 HTML 文档 结构 。 创 建 一 个 新 的 HTML 文档 ， 并 添加 一 个 列表 ， 在 列表 项 中 
包含 基本 的 锚 链 接 。 不 需要 任何 额外 的 <div> 或 者 <span> 标 签 ， 也 不 用 添加 id 和 class 属性 , 一切 效 果 ， 
都 通过 CSS 进行 控制 。 结 构 代 码 如 下 : ] 


<ul 1d="container"> 
<]i><a hre 住 "#" class="button gray"> 灰 色 风 格 按钮 </a></li> 
<]i><a hre 住 "#" class="button pink"> 粉 红 风 格 按钮 </a></li> 
<]i><a hre 传 " 操 ' class="button blue"> 蓝 色 风 格 按钮 </a></li> 
<]i><a hre 住 "#" class="button green"> 绿 色 风 格 按钮 </a></li> 
<]i><a hre 信 "#" class="button turquoise"> 天 蓝 色 风格 按钮 </a></li> | 
<li><a hre 伍 "#" class="button black"> 黑 色 风 格 按 钮 </a></li> | 
<]i><a hre 信 "#" class="button darkgray"> 深 灰色 风格 按钮 </a></li> 
<]i><a hre 住 "#" class="button yellow"> 黄 色 风 格 按钮 </a></li> ] 
<]i><a hre 住 "#" class="button purple"> 紫 色 风 格 按钮 </a></li> 
<li><a hre 伍 "#" class="button darkblue"> 银 灰 风 格 按 钮 </a></li> 

</ul> L 
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为 了 演示 不 同色 彩 风格 的 按钮 样式 ,可 以 定义 主题 样式 类 ,通过 给 每 一 个 按钮 应 用 不 同 的 主题 样 


， 式 ， 可 以 充分 发 挥 CSS 的 优势 和 便捷 之 处 。 


第 2 步 ， 新 建 内 部 样式 表 ， 定 义 基 本 的 按钮 类 样式 。 


ul {list-style: none:} 
a.button { 
display: block: float: left: 
position: relative; 
height: 2Spx: width: 120px: 
margin: 0 10px 18px 0; 
text-decoration: none: 
font: 12px "Helvetica Neue", Helvetica, Arlal, sans-serif: 
font-weight: bold; line-height: 25px; text-align: center; 
} 


第 3 步 , 为 按钮 类 样式 增加 行为 样式 , 让 按钮 实现 动态 效果 。 这 里 主要 使 用 了 :hover 伪 类 选择 右 。 


”例如 ,为 灰色 系 按钮 设计 鼠标 经 过 时 的 动态 样式 效果 ， 主 要 包括 字体 颜色 和 背景 色 的 变化 ， 以 及 边框 
“ 线 的 变换 ， 以 模拟 立体 效果 。 


.gray, .gray:hover { 
color: #555:; 
border-bottom: 4px solid #b2b1b]; 
background: #eee: 


.gray:hover {backeground: #e2e2e2:} 
第 4 步 ， 定义 双边 框 样式 。 通 过 预 宽 会 发 现 现在 的 按钮 边框 显得 比较 单薄 ， 需 要 为 按钮 定义 粗 边 


框 的 底部 效果 ， 同 时 还 需要 增加 一 点 点 行 间 距 ， 因 此 这 里 使 用 了 :before 和 :after 伪 类 样式 。 
a.button:before, a.button:after { 
content: ": 


position: absolute: 
left: -1px: bottom: -1px:; 
height: 25px; width: 120px; 
border-radius: 3px; 
} 
a.button:before { 
height: 23px; 
bottom: -4px:; 
border-top: 0; 
border-radius: 0 0 3px 3px; 
box-shadow: 0 lpx lpx Opx #bfbfbf: 
} 


第 5 步 ， 为 了 彰显 按钮 的 金属 特质 ， 不 妨 借助 CSS3 的 特效 定义 圆 角 效果 。 
a.button {border-radius: 3pX:} 
第 6 步 ， 为 边框 定义 阴影 效果 。 


a.button:before, a.button:after {border-radius: 3px;} 
a.button:before { 
border-radius: 0 0 3px 3px; 
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box-shadow: 0 1px lpx Opx #bfbfbf: 


} 
第 7 步 ， 定 义 鼠 标 经 过 和 访问 过 按钮 伪 类 状态 类 样式 ， 设 计 渐 变 背 景色 特效 。 
谍 设 计 灰 色 主 题 风格 */ 入 
a.gray, a.gray:hover, a.gray:visited { hi 
color: #555; ‘Note 
border-bottom: 4px solid #b2b1b]1: 
text-shadow: Opx lpx Opx #fafafa: 
background: #eee: 
background: linear-gradient(to top, #eee, #e2e2e2); 
box-shadow: inset lpx lpx 0 #{5f5f5:; 
} 


.gray:before, .gray:after { 
border: 1px solid #cbcbceb:; 
border-bottom: 1px solid #aSaSa5; 
} 
.gray:hover { 
background: #e2e2e2:; 
background: linear-gradient(to top, #e2e2e2, #eee); 
} 


第 8 步 ， 利 用 :active 伪 类 选择 器 定义 对 象 激活 状态 的 样式 效果 。 
/# 激 活 状态 样式 类 


a.button:active { 
border: none: 
bottom: -4px; 
margin-bottom: 22px; 
box-shadow: lpx lpx 0 #fff, inset 0 1px lpx rgba(0, 0, 0, 0.3); 
} 
a.button:active:before, 
a.button:active:after { 
border: none: 
box-shadow: none: 


2.6 伪 对 象 选 择 器 


伪 对 象 选择 器 主要 针对 不 确定 对 象 定义 样式 , 如 第 一 行文 本 、 第 一 个 字符 、 前 面 内 容 、 后 面 内 容 。 
这 些 对 象 具体 存在 ， 但 又 无 法 具体 确定 ， 需 要 使 用 特定 类 型 的 选择 器 来 匹配 它们 。 

伪 对 象 选 择 器 以 冒号 〈:) 作为 语法 标识 符 。 冒 号 前 可 以 添加 选择 符 ， 限 定 伪 对 象 应 用 的 范围 
冒号 后 为 伪 对 象 名 称 ， 冒 号 前 后 没有 空格 。 语 法 格式 如 下 : 

: 伪 对 象 名称 

CSS3 新 语法 格式 如 下 : 

:: 伪 对 象 名 称 


e。 39 。 


” 安 提示 : 伪 对 象 前 面包 含 两 个 冒号 ， 主 要 是 为 了 与 伪 类 选择 器 进行 语法 区 分 . 


| 【示例 1】 下 面 示例 使 用 :before 伪 对 象 选择 器 在 段落 文本 前 面 添加 3 个 字符 “ 柳 永 : >， 然后 使 用 
” :first-letter 伪 对 象 选 择 器 设置 段落 文本 第 一 个 字符 放大 显示 ， 定 义 字体 大 小 为 24px， 效 果 如 图 2.24 所 示 。 


到 ] <style type="text/css"> 


| p:before {content: ' 柳 永 : ';} 
Note p:first-letter {font-size:24px:} 
</style> 


<p> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 惊 。</p> 


Se +) | hitpy//localho... > 0 | Elocalhost 


柳 永 ， 衣 带 洁 宽 终 不 悔 ， 为 但 消 得 人 以 惊 。 


| 图 2.24 定义 第 一 个 字符 放大 显示 


。 【示例 2】 下 面 示例 使 用 :first-letter 伪 对 象 选 择 器 设置 段落 文本 第 一 个 字符 放大 下 沉 显示 ， 并 使 
”用 :first-line 伪 对 象 选 择 器 设置 段落 文本 第 一 行 字符 放大 带 有 阴影 显示 ， 效 果 如 图 2.25 所 示 。 


| 

| <style type="text/css"> 

p{font-size:18px; line-height: 1.6em:;} 

| p:first-letter {/* 段 落 文 本 中 第 一 个 字符 样式 */ 
float:left: 

font-size:60px:; 

font-welght:bold: 

margin:26px 6pX: 


} 
p:first-line {/* 段 落 文本 中 第 一 行 字符 样式 */ 
color:red: 
font-size:24px; 
text-shadow:2px 2px 2px rgba(147,251.,64,1); 
| 
| </style> 


<p> 我 在 腾 肛 中 ， 眼 前 展开 一 片 海 边 碧 绿 的 沙 地 来 ， 上 面 深 蓝 的 天 空中 挂 着 一 轮 金黄 的 圆 月 。 我 想 : 希望 本 
是 无 所 谓 有 ， 无 所 谓 无 的 。 这 正如 地 上 的 路 ;其 实地 上 本 没有 路 ， 走 的 人 多 了 ， 也 便 成 了 路 。 </p> 


| [+ 、 原 http://localhost:8030/mysiteftest2h ~ 是 全 localhost > | (+ .| 厌 http://localho... > 昌 


在 腾 胱 中 ， 眼 前 展开 一 片 海边 扑 绿 的 沙 地 来 、 上 和 面 深蓝 在 采 腌 中 ， 眼 前 展开 一 片 海边 癸 绿 的 沙 
的 天 空中 挂 着 一 轮 人 金黄 的 图 月 。 我 想 : 希望 本 是 无 所 谓 有 ， 无 所 谓 无 的 。 地 来 ， 上 夯 深 蓝 的 无 室 中 挂 着 一 轮 人 金黄 的 图 月 。 我 
这 正如 地 上 的 路 ， 其 实地 上 本 没有 路 ， 走 的 人 多 了 ， 也 便 成 了 路 。 想 : 希望 本 是 无 所 谓 有 ， 无 所 谓 无 的 。 这 正如 地 上 的 
路 ， 其 实地 上 本 没有 路 ， 走 的 人 多 了 ， 也 便 成 了 路 。 


图 2.25 定义 第 一 个 字符 和 第 一 行 字符 特殊 显示 
27 案例 实战 


下 面 以 案例 形式 练习 CSS3 选择 器 的 应 用 。 
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2.7.1 设计 表格 样式 


本 案例 设计 一 个 分 层 表 格 样 式 ， 借 助 任 定 伪 类 选择 器 和 结构 伪 类 选择 器 ， 配 合 CSS 背景 图 像 设 
计 树 形 结构 标志 ; 借助 伪 类 选择 器 设计 鼠标 经 过 时 动态 背景 效果 ; 利用 CSS 边框 和 背景 色 设计 标题 
行 的 立体 显示 效果 。 演 示 效 果 如 图 2.26 所 示 。 


EC hito//ocalhostiindex Dr BO 加 上 机 和 荡 习 


编号 全 类 去 过 二 说 明 
漳 单 的 结构 协 兴 
-1 -fist-child 选择 旱 个 元 素 的 第 一 个 子 元 于 。 
:2 :last-child 选择 某 个 元 去 的 最 后 一 个 子 元 志 。 
-first-of-type 选择 一 个 上 级 元 索 下 的 第 一 个 月 关子 元 索 。 
:lazt-ef-tyP= 选择 一 个 上 绷 元 喜 的 最 后 一 个 月 尖子 元 素 。 
:only-child 选择 的 元 素 是 它 的 改元 素 的 唯一 一 个 子 元 素 。 
:only-of-type 迁 择 一 个 元素 是 它 的 上 级 郝 素 的 哗 一 一 个 相同 类 型 的 了 元 素 。 
训 -eapty 选秀 的 元 过 里 而 没有 任何 内 容 。 
车 尾 信 类 到 洪 
:. :nth-childO 选择 某 个 元 素 的 一 个 或 多 个 特定 的 子 元 素 。 
:nth-laat-childO 选择 某 个 元 素 的 一 个 或 欠 个 特定 的 子 元 素 ， 从 这 个 元 素 的 最 后 一 个 子 元 素 开始 算 。 
-nth-of-typeO 选择 指定 的 元 素 。 
:nth-last-of-type () 选择 指证 的 元 素 ， 从 元 志 的 节 后 一 个 开始 计算 。 


图 2.26 设计 表格 样式 


【操作 步骤 】 
第 1 步 ， 利 用 表格 结构 构建 一 个 数据 表 。 


<table> 
<thead> 
> 
<th> 编 号 </th> 
<th> 伪 类 表达 式 </th> 
<th> 说 明 </th> 
</tr> 
</thead> 
<tbody> 
<tr><td colspan="3"> 简 单 的 结构 伪 类 </td></tr> 
<tr><th>1</th><td>:first-child</td><td> 选 择 某 个 元 素 的 第 一 个 子 元 素 。</td></tr> 
<tr><th>2</ 了 ><td>:]last-child</td><td> 选 择 某 个 元 素 的 最 后 一 个 子 元 素 。</td></tr> 
<tr><th>3</th><td>:first-of-type</td><td> 选 择 一 个 上 级 元 素 下 的 第 一 个 同类 子 元 素 。</td></tr> 
<tr><th>4</th><td>:last-of-type</td><td> 选 择 一 个 上 级 元 素 的 最 后 一 个 同类 子 元 素 。</td></tr> 
<tr><th>5</th><td>:only-child</td><td> 选 择 的 元 素 是 它 的 父 元 素 的 唯一 一 个 子 元 素 。</td></tr> 
<tr><th>6</th><td>:only-of-type</td><td> 选 择 一 个 元 素 是 它 的 上 级 元 素 的 唯一 一 个 相同 类 型 的 子 
元 素 。</td></tr> 
<tr><th class="end">7</th><td>:empty</td><td> 选 择 的 元 素 里 面 没有 任何 内 容 。</td></tr> 
<tr><td colspan="3"> 结 构 伪 类 图 数 </td></tr> 
<tr><th>8</ 也 ><td>:nth-child()</td><td> 选 择 某 个 元 素 的 一 个 或 多 个 特定 的 子 元 素 。</td></tr> 
<tr><th>9</th><td>:nth-last-child0</td><td> 选 择 某 个 元 素 的 一 个 或 多 个 特定 的 子 元 素 ， 从 这 个 元 素 
的 最 后 一 个 子 元 素 开始 算 。</td></tr> 
<tr><th>10</th><td>:nth-of-typeO</td><td> 选 择 指定 的 元 素 。</td></tr> 
<tr><th class="end">11</th><td>:nth-last-of-typeO</td><td> 选 择 指定 的 元 素 , 从 元 素 的 最 后 一 个 开始 
计算 。</td></tr> 
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</tbody> 
</table> 


第 2 步 ， 使 用 <style> 标 签 在 当前 文档 中 内 建 一 个 样式 表 ， 并 初始 化 表格 样式 。 


table {border-collapse: collapse: font-slze: 75%: line-height: 1.4; border: solid 2px #ccce; width: 100%;} 
th, td {padding: .3em .Sem:; cursor: pointer;} 
th {font-weight: normal; text-align: left: padding-left: 1 Spx;} 


第 3 步 ， 使 用 结构 伪 类 选择 器 匹配 合并 单元 格 所 在 的 行 ， 定 义 合 并 单元 格 所 在 行 加 粗 显 示 。 


td:only-of-type { 
font-weight:bold; 
color:#444: 

} 


第 4 步 ， 使 用 否定 伪 类 选择 器 选择 主体 区 域 非 最 后 一 个 了 h 元 素 。 以 背景 方式 在 行 前 定义 结构 路 


tbody th:not(.end) { 
background: url(1mages/dots.gif) 1Spx 56% no-Tepeat: 
padding-left: 26px: 


} 
第 5 步 ， 使 用 类 选择 器 选择 主体 区 域 非 最 后 一 个 也 元素 。 以 背景 方式 在 行 前 定义 结构 封闭 路 径 线 。 
tbody th.end { 
background: url(1mages/dots3.g1f) 1Spx 56% no-repeat: 
padding-left: 26px: 
} 


第 6 步 ， 使 用 thead 元 素 把 表 头 标题 独立 出 来 ， 方 便 CSS 控制 ， 避 人 免 定 义 过 多 的 class 属性 。 也 元 


， 素 有 两 种 显示 形式 : 一 种 用 来 定义 列 标题 ; 另 一 种 用 来 定义 行 标 题 。 下 面 样式 是 定义 表格 标题 列 样式 。 


theadth { 
backsground: #c6ceda: 
border-color: #fff #fff #888 #fff: 
border-style: solid; 
border-width: 1px 1px 2px 1px: 
padding-left: .Sem; 

} 


第 7 步 ， 设 计 隔 行 换 色 的 背景 效果 ， 这 里 主要 应 用 了 :nth-child(2n) 选 择 器 。 同 时 使 用 :hover 动态 


” 伪 类 定义 鼠标 经 过 时 的 行 背景 色 动画 变化 ， 以 提示 鼠标 当前 经 过 行 效果 。 


tbody tr:nth-child(2n) {backeground-color: #fef:} 
tbody tr:hover{background: #fbf:} 


得。 2 7 2 设计 超 链接 样式 


本 宁 例 模拟 百度 文库 的 “相关 文档 推荐 ”模块 样式 设计 效果 ， 演示 如 何 利 用 属性 选择 句 快 速 并 准 


， 确 匹配 文档 类 型 ， 为 不 同类 型 文档 超 链 接 定义 不 同 的 显示 图 标 ， 以 便 浏 览 者 准确 识别 文档 类 型 。 示 例 
”演示 效果 如 图 2.27 所 示 。 
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图 2.27 设计 超 链接 文档 类 型 的 显示 图 标 


【操作 步骤 】 
第 1 步 ， 构 建 一 个 简单 的 模块 结构 。 在 这 个 模块 结构 中 ， 为 了 能 够 突出 重点 ， 忽 略 了 其 他 细节 信 
息 。 代 人 码 如 下 : 
<div 1d= "wrap"> 
<p><a hre 合 "http://wwwbaidu.commame.pdf'> 移 动 互 联网 </a><span><img src="images/starl1.jpg" /> 81 页 
免费 </span> </p> 
<p><a hre 合 "http://www.baidu.commame.ppt"> 什 么 是 移动 互联 网 </a><span><img src="images/starl.jpg" /> 
8 页 1 财富 值 </span> </p> 
<p><a hre 伍 "http:/www.baidu.com/name.xls"> 中 国 移动 互联 网 </a><span><img src="images/starl.jpg" 人 
38 页 1 财富 值 </span> </p> 
<p><a hre 伍 "http:/www.baidu.com/name.txt"> 移 动 互 联网 </a> <span><img src="images/star3.jpg" /> 57 页 
5 财富 值 </span></p> 
<p><a hre 伍 "http://www.baidu.com/name.doc"> 移 动 互联 网 </a><span><img src="images/star3.jpg" 入 42 页 
2 财富 值 </span> </p> 
</div> 


第 2 步 ， 新 建 一 个 内 部 样式 表 ， 在 样式 表 中 对 案例 文档 进行 样式 初始 化 ， 代 码 如 下 : 


/# 初 始 化 超 链 接 、span 元 素 和 p 元 素 基本 样式 */ 

a ing-left: 24px: text-decoration: none:} 

span {color: #999: font-slze: 12px: display: block: padding-left: 24px;:; padding-bottom: 6px;} 
Pp {margin: 4px;} 


第 3 步 ， 利 用 属性 选择 器 为 不 同类 型 文档 超 链 接 定 义 显 示 图 标 。 


a[href$="pdf'] {匹配 PDF 文件 */ 
background: url(1mages/pdf.jpg) no-repeat left center: 


} 
a[href$="ppt"] {/* 匹 配 演示 文稿 和 
backsround: url(1mages/ppt.jpg) no-repeat left center: 
} 
a[href$="txt"] {l*# 匹 配 记事 本 文件 #/ 
background: url(1mages/txt.jpg) no-repeat left center; 


} 
a[href$="doc"] {匹配 Word 文件 */ 
background: url(i1mages/doc.jpg) no-repeat left center:; 


} 
a[href$="xls"] {/*[ 下 配 Excel 文件 */ 
backsground: url(1mages/xls.jpg) no-repeat left center: 


} 
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【拓展 】 
超 链接 的 类 型 和 形式 是 多 样 的 ， 如 锚 链 接 、 下 载 链接 、 图 片 链接 、 衬 链接 、 脚 本 链接 等 ， 都 可 以 


“利用 属性 选择 器 来 标识 这 些 超 链接 的 不 同样 式 。 代 码 如 下 : 


a[href'="http:"] {下 配 所 有 有 效 超 链 接 */ 
background: url(1mages/window.gif) no-repeat left center; 


} 

a[hre 剑 ="xls"] {* 丐 配 XML 样式 表 文 件 */ 
background: url(images/icon Xls.glf no-repeat left center: 
padding-left: 18px:; 


} 

a[href$="rar"] {/* 匹 配 压 缩 文件 各 
backsground: url(1mages/icon rar.gif) no-repeat left center: 
padding-left: 18px: 


} 

a[hrefy="gif"] {# 匹 配 GIF 图 像 文 件 */ 
background: url(i1mages/icon Img.glb no-repeat left center: 
padding-left: 18px:; 


} 

a[href$="jpg"] {匹配 JPG 图 像 文件 */ 
backsground: url(i1mages/icon img.aif) no-repeat left center: 
padding-left: 18px: 

} 

a[href$="png"] {/#* 匹 配 PNG 图 像 文件 */ 
background: url(images/icon Img.glf) no-repeat left center:; 
padding-left: 18px: 


2.8 在 线 练 司 


本 节 为 读者 提供 了 多 个 课外 练习 ， 以 便 灵 活 使 用 CSS， 强 化 基本 功 训练 。 感 兴趣 的 读者 可 以 扫 码 
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使 用 CSS3 美化 文本 和 图 像 


对 网 页 进行 修饰 可 以 使 其 更 加 美观 ，CSS3 为 字体 和 文本 提供 了 大 量 的 属性 ， 如 字体 的 
类 型 、 火 小 和 颜色 等 ,文本 的 对 齐 、 间 距 、 缩 进 和 行 高 等 。 本章 重点 讲解 CSS3 字体 和 文本 
样式 ， 由 于 文本 与 图 片 在 网 页 中 紧密 排版 在 一 起 ， 本 章 还 介绍 了 图 片 的 常用 样式 设计 。 


【 学 习 重 点 】 

| 能够 定义 字体 类 型 、 大 小 、 颜 色 等 基本 样式 。 

六 能够 设计 文本 基本 版 式 ， 如 对 齐 、 行 高 、 间 距 等 。 
中 能 够 设计 图 片 的 基本 样式 。 

六 能够 灵活 设计 美观 、 实 用 的 图 文 版 式 。 


和 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


3.1 设计 字体 样式 


恬 风 
字体 样式 包括 字体 类 型 、 大 小 、 颜 色 、 粗 细 、 下 画 线 、 斜 体 、 
大 小 写 等 。 下 面 分 别 进行 介绍 。 


3.1.1 定义 字体 类 型 
使 用 font-family 属性 可 以 定义 字体 类 型 ， 用 法 如 下 : 
font-famlly: name 


其 中 name 表示 字体 名 称 ， 可 以 设置 字体 列表 ， 多 个 字体 按 优先 顺序 排列 ， 以 逗号 隔 开 。 

如 果 字 体 名 称 包 含 空格 ， 则 应 使 用 引号 括 起 。 第 二 种 声明 方式 使 用 所 列 出 的 字体 序列 名 称 ， 如 果 
使 用 fantasy 序列 ， 将 提供 默认 字体 序列 。 

【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testl.html， 在 <body> 标 签 内 输入 两 行 段落 


文本 : 


<p> 月 落 乌 啼 箱 满 天 ， 江 枫 渔 火 对 悉 眠 。 </p> 
<p> 姑 苏 城 外 寒山 和 村， 夜半 钟 声 到 客船 。</p> 


在 <head> 标 签 内 添加 <style type='"text/css"> 标 答 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样 式 ， 用 
”来 定义 网 页 字体 的 类 型 。 


Pp {+ 段落 样式 */ 
font-family: "隶书 ": /# 隶 书 字体 并 
} 


在 浏览 器 中 预览 效果 如 图 3.1 所 示 。 


X 
CE) EE http://localhostrtestl ~ 0 碟 localhost 


月 落 乌 嘛 箱 满 天 ， 江 枫 光 火 对 杰 眠 。 


结 苏 城 外 富山 村， 夜半 钟 声 到 客船 。 


图 3.1 设计 隶书 字体 效果 


” 窑 提示 : 在 网 页 设计 中 , 没有 中 文通 用 字体 类 型 ， 中 文字 体 的 表现 力 比 较 弱 ， 即 使 存在 各 种 艺术 字 
体 ， 但 是 考虑 到 用 户 系 统 的 支持 率 ， 很 少 被 广泛 使 用 。 一 般 中 文 网 页 字体 默认 为 宋体 ， 对 
于 标题 或 特殊 提示 信息 ， 如 果 需 要 特殊 字体 ， 则 建议 采用 图 像 形 式 间 接 实现 。 

拉丁 字体 类 型 比较 丰富 ， 通 用 字体 的 选择 余地 大 、 艺 术 表 现 力 强 ， 在 浏览 外 文 网 站 时 ， 用 
户 会 发 现 页 面 选用 的 字体 类 丰富 很 多 。 习 惯 上 ， 标 题 都 使 用 无 衬 线 字体 、 艺 术 字 体 或 手写 
体 等 ， 而 网 页 正文 则 多 使 用 衬 线 字体 等 。 


【拓展 】 
如 果 读 者 想 要 更 深入 地 了 解 网 页 字体 类 型 的 设计 方法 ， 请 扫 码 阅读 。 
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3.1.2 定义 字体 大 小 


使 用 CSS3 的 font-size 属性 可 以 定义 字体 大 小 ， 用 法 如 下 : 
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length 


告 
一 一 


其 中 xx-small (最 小 )、x-small( 较 小 )、small (小 )、medium (正常 )、large (大 )、x-large〔( 较 


大 )、xx-large (最 大 ) 表示 绝对 字体 尺寸 ， 这 些 特殊 值 将 根据 对 象 字 体 进 行 调整 ，larger〈 增 大 ) 和 


smaller (减少 ) 这 对 特殊 值 能 够 根据 父 对 象 中 字体 尺寸 进行 相对 增 大 或 者 缩小 处 理 , 使 用 成 比例 的 em ， 


单位 进行 计算 ; length 可 以 是 百分数 ， 或 者 是 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 但 不 可 为 负 值 ， 
其 百分比 取 值 基于 父 对 象 中 字体 的 矿 寸 来 计算 ， 与 em 单位 计算 相同 。 
【示例 】 下 面 示例 演示 如 何 为 网 页 定义 字体 大 小 。 


启动 Dreamweaver， 新 建 一 个 网 页 ， 保存 为 test.html， 在 <head> 标 签 内 添加 <style type="text/css"> ， 


标签 ， 定义 一 个 内 部 样式 表 。 然 后 输入 下 面 样式 ， 分别 设置 网 页 字体 默认 大 小 、 正 文字 体 大 小 ， 以 及 
栏目 中 字体 大 小 。 
body {font-size:12px:} 谍 以 像素 为 单位 设置 字体 大 小 */ 
p {font-size:0.75em:;} 诺 以 父辈 字体 大 小 为 参考 设置 大 小 */ 
div {font:9pt Arial, Helvetica, sans-serif:} /以 点 为 单位 设置 字体 大 小 并 
【拓展 】 


如 果 读 者 想 要 更 深入 地 了 解 网 页 字体 大 小 的 设计 方法 和 各 种 单位 的 选择 技巧 ， 请 扫 人 得 阅读 。 
3.1.3 定义 字体 颜色 光 


使 用 CSS3 的 color 属性 可 以 定义 字体 颜色 ， 用 法 如 下 : 


color: color 


参数 color 表示 颜色 值 ， 取 值 包括 颜色 名 、 十 六 进 制 值 、RGB 等 颜色 函数 ,详细 说 明 请 参考 CSS3 


参考 手册 ， 或 者 扫 码 了 解 更 详细 内 容 。 
【示例 】 下 面 示例 演示 如 何在 文档 中 定义 字体 颜色 。 


启动 Dreamweaver， 新 建 一 个 网 页 ， 保存 为 test.html， 在 <head> 标 签 内 添加 <style type="text/css"> ] 


标签 ， 定 义 一 个 内 部 样式 表 。 然 后 输入 下 面 样式 ， 分 别 定义 页 面 、 段 落 文 本 、<div> 标 签 、<span> 标 
签 包含 字体 颜色 。 | 
body {color:gray:} /# 使 用 颜色 名 
p {color:#666666:} 诺 使 用 十 六 进 制 */ 
div {color:regb(120,120,120):} /# 使 用 RGB*/ 
span {color:rgb(50%,50%,50%):} /# 使 用 RGB*/ 


3.1.4 定义 字体 粗细 


使 用 CSS3 的 font-weight 属性 可 以 定义 字体 粗细 ， 用 法 如 下 : 
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 


其 中 normal 为 默认 值 , 表示 正常 的 字体 ,， 相当 于 取 值 为 400; bold 表示 粗 体 ,相当 于 取 值 为 700， 
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' 或 者 使 用 <b > 标签 定义 的 字体 效果 ; bolder( 较 粗 ) 和 lighter( 较 细 ) 是 相对 于 normal 字体 粗细 而 言 ; 
， 另外 也 可 以 设置 值 为 100、200、300、400、500、600、700、800、900， 它 们 分 别 表示 字体 的 粗细 ， 
”是 对 字体 粗细 的 一 种 量化 方式 ， 值 越 大 就 表示 越 粗 ， 相 反 就 表示 越 细 。 

| 【示例 】 定 义 字 体 粗细 。 

| 新 建 test.html 文档 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 分 别 定 义 段 落 文 本 、 一 级 标题 、 
<div> 标 签 包含 字体 的 粗细 效果 ， 同 时 定义 一 个 粗 体 样式 类 。 


p {font-weight: normal} /# 等 于 400*/ 
hl {font-weight: 700} /* 等 于 bold*/ 
div {font-weight: bolder} /可 能 为 500*/ 
.bold {font-weight'bold:} /# 粗 体 样 式 类 *#/ 


”0 注 意 : 设置 字体 粗细 也 可 以 称 为 定义 字体 的 重量 对 于 中 文 网 页 设计 来 说 ， 一 般 仅 用 到 bold ( 加 
粗 ) 、normal (普通 ) 两 个 属性 值 。 


3.1.5 定义 艺术 字体 

使 用 CSS3 的 font-style 属性 可 以 定义 字体 倾斜 效果 ， 用 法 如 下 : 

font-style: normal | italic | oblique 

其 中 normal 为 默认 值 , 表示 正常 的 字体 ; italic 表示 和 斜体; oblique 表示 倾斜 的 字体 。italic 和 oblique 
”两 个 取 值 只 能 在 英文 等 西方 文字 中 有 效 。 

| 【示例 】 新 建 test.html 文档 ， 输 入 下 面 样式 ， 定 义 一 个 和 斜体 样式 类 。 


.italic {/* 斜 体 样式 类 */ 
font-style:italic; 


} 
在 <body> 标 签 中 输入 两 段 文本 ， 并 把 斜体 样式 类 应 用 到 其 中 一 段 文 本 中 。 


<p> 知 我 者 ， 谓 我 心 忧 ， 不 知 我 者 ， 谓 我 何 求 。 </p> 
<p class="italic"> 君 子 坦荡 荡 ， 小 人 长 契 威 。</p> 


最 后 在 浏览 器 中 预览 ， 比 较 效果 如 图 3.2 所 示 。 


x 


< 二 SS 中 -| 友 http://localho... ~ 全 0 


知 我 者 ， 谓 我 心 居 ， 不 知 我 者 ， 谓 我 何 来 。 


雪 元 妇 洲 小， 外 人 长 民 夸 。 


图 3.2 ”比较 正 第 字体 和 斜体 效 末 
3.1.6 定义 修饰 线 


使 用 CSS3 的 text-decoration 属性 可 以 定义 字体 修饰 线 效 果 ， 用 法 如 下 : 
text-decoration: none || underline || blink || overline || line-through 


其 中 normal 为 默认 值 ， 表 示 无 修饰 线 ; underline 表示 下 男 线 效 果 ; blink 表示 闪烁 效果 ; overline 
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表示 上 夯 线 效果 ，line-through 表示 贯穿 线 效果 。 
【示例 】 设 置 文字 修饰 线 。 


【操作 步骤 】 
第 1 步 ， 新 建 testhtml 文档 ， 在 <head> 标 签 内 添加 <style type= "text/css"> 标 签 ， 定 义 一 个 内 部 样 ， 
式 表 。 | 
第 2 步 ， 输 入 下 面 样式 ， 定 义 3 个 修饰 字体 样式 类 。 
-Underline {text-decoration:underline:} /# 下 画 线 样式 类 #/ 
.Overline {text-decoration:overline:} 放 上 男 线 样式 类 */ 
.line-through {text-decoration:line-through:} 颇 删 除 线 样式 类 */ 


第 3 步 ， 在 <body> 标 签 中 输入 3 行 段 沙文 本， 并 分 别 应 用 上 面 的 修饰 类 样式 。 


<p class="underline"> 昨 夜 西风 凋 用 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p> 
<p class="overline"> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 </p> 
<p class"line-through"> 众 里 寻 他 千百度 ， 蕃 然 回首 ， 那 人 却 在 灯火 阑珊 处 </p> 


第 4 步 ， 再 定义 一 个 样式 ， 在 该 样式 中 ， 同 时 声明 多 个 修饰 值 ， 定 义 的 样式 如 下 : 
‘line {text-decoration:line-through overline underline:} 

第 5 步 ， 在 正文 中 输入 一 行 段落 文本 ， 并 把 line 样式 类 应 该 到 该 行文 本 中 。 

<p class="line"> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 。</p> 

第 6 步 ， 在 浏览 右 中 预览 ， 多 种 修饰 线 比 较 效 果 如 图 3.3 所 示 。 


Xx 


< » Clr 
EE 和 作 广 人 话 避 横 三 到 上 < 大 涯 中 


上 人 之 录 大 过 业 大 学 I 在， 8 二 二 机 之 局 内 


人 


图 3.3 多 种 修饰 线 的 应 用 效果 


会 提示 : CSS3 增强 text-decoration 功能 ， 新 增 如 下 5 个 子 属 性 。 


回 text-decoration-line: 设置 修饰 线 的 位 置 ， 取 值 包 括 none (无 ) 、underline、overline、 


line-through、Pblink。 

加 ”text-decoration-color: 设置 修饰 线 的 颜色 。 

回 text-decoration-style: 设置 修饰 线 的 形状 ， 取 值 包 括 solid、double、dotted、dashed.、 
wavy (波浪 线 ) 。 

回 text-decoration-skip: 设置 文本 修饰 线条 必须 略 过 内 容 中 的 哪些 部 分 。 

回 text-underline-position: 设置 对 象 中 下 画 线 的 位 置 。 


关于 这 些 子 属性 的 详细 取 值 说 明和 用 法 ， 请 参考 CSS3 参考 手册 。 由 于 目前 大 部 分 浏览 器 


暂 不 支持 这 些 子 属性 ， 可 以 暂时 忽略 。 
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3.1.7 定义 字体 的 变 体 


使 用 CSS3 的 font-variant 属性 可 以 定义 字体 的 变 体 效果 ， 用 法 如 下 : 
font-variant: normal | small-caps 
其 中 normal 为 默认 值 ， 表 示 正 常 的 字体 ; small-caps 表示 小 型 的 大 写字 母 字 体 。 

【示例 】 新 建 test.html 文档 ， 在 内 部 样式 表 中 定义 一 个 类 样式 。 
.Small-caps {/* 小 型 大 写字 母 样 式 类 */ 

font-variant:small-caps;} 

然后 在 <body> 标 签 中 输入 一 行 段 落 文 本 ， 并 应 用 上 面 定义 的 类 样式 。 
<p class="small-caps">font-variant </p> 
”0 注意 : font-variant 仅 支持 拉丁 字体 ， 中 文字 体 没有 大 小 写 效果 区 分 。 如 果 设置 了 小 型 大 写字 体 ， 
] 但 是 该 字体 没有 找到 原始 小 型 大 写字 体 ， 则 浏览 器 会 模拟 一 个 。 例 如 ， 可 通过 使 用 一 个 常 
规 字体 ， 并 将 其 小 写字 母 替换 为 缩小 过 的 大 写字 母 。 


: a 和 / 3.1.8 定义 大 小 与 字体 


使 用 CSS3 的 text-transform 属性 可 以 定义 字体 大 小 写 效果 。 用 法 如 下 : 

text-transform: none | capitalize | uppercase | lowercase 

其 中 none 为 默认 值 ， 表 示 无 转换 发 生 ; capitalize 表示 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 

余 无 转换 发 生 ，uppercase 表示 把 所 有 字母 都 转换 成 大 写 ; lowercase 表示 把 所 有 字母 都 转换 成 小 写 。 
【示例 】 新 建 test.html 文档 ， 在 内 部 样式 表 中 定义 3 个 类 样式 。 

.capitalize {text-transform:capitalize;} /* 首 字母 大 小 写 样 式 类 */ 


.uppercase {text-transform:uppercase:;} /* 大 写 样 式 类 */ 
.lowercase {text-transform:lowercase;} /* 小 写 样式 类 */ 


然后 在 <body> 标 签 中 输入 3 行 段落 文本 ， 并 分 别 应 用 上 面 定义 的 类 样式 。 


<p class="capitalize">text-transform:capitalize;</p> 
<p class="uppercase">text-transform:uppercase;</p> 
<p class="lowercase">text-transform:lowercase;</p> 


分 别 在 正 和 Firefox 浏览 右 中 预览 ， 则 比较 效果 如 图 3.4 和 图 3.5 所 示 。 


XxX 
DS ee P20 i 


localhost/mysitc/tcstihtm 


Text-Transform:capitalize: 


Text-transiorm:capitalize; 


TEXT-TRANSFORM:UPPERCASE:; 
TEXT-TRANSFORN.UPPERCASE; 


text-transform:lowercase; 
text-transtorm:lowercase; 


图 3.4 正中 解析 的 大 小 效果 图 3.5” Firefox 中 解析 的 大 小 效果 
比较 发 现 ， 正 认为 只 要 是 单词 就 把 首 字 母 转 换 为 大 写 ， 而 Firefox 认为 只 有 单词 通过 空格 间隔 之 
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后 ， 才 能 够 成 为 独立 意义 上 的 单词 ， 所 以 几 个 单词 连 在 一 起 时 就 算 作 一 个 词 。 


3.2 设计 文本 样式 


3.2.1 定义 文本 对 齐 


使 用 CSS3 的 text-align 属性 可 以 定义 文本 的 水 平 对 齐 方式 ， 用 法 如 下 : 

text-align: left | right | center | justify 

其 中 left 为 默认 值 ， 表 示 左 对 齐 ; right 为 右 对 齐 ; center 为 居中 对 齐 ; justify 为 两 端 对 齐 。 
【示例 】 新 建 test.html 文档 ， 在 内 部 样式 表 中 定义 3 个 对 齐 类 样式 。 

.left {text-align: left:} 

.center {text-align: center:} 

Tight {text-align: right:} 

然后 在 <body> 标 签 中 输入 3 段 文本 ， 并 分 别 应 用 这 3 个 类 样式 。 

<p align="left"> 昨 夜 西风 凋 自 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p> 


<p class="center"> 衣 融 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 </p> 
<p class="right"> 众 里 寻 他 干 百度 ， 菊 然 回 首 ， 那 人 却 在 灯火 曾 丙 处 </p> 


在 浏览 缉 中 预览 ， 比 较 效果 如 图 3.6 所 示 。 


CY 车 htpy/localhost'8080/mysfte/tsst1.html 


昨夜 西风 调 吏 树 ， 独 上 高 楼 ， 望 尽 天 竹 路 


衣 带 沽 宽 找 不 悔 ， 为 伊 销 得 人 居 迟 
从 里 寻 他 千百度 ， 葵 然 回首 ， 那 人 却 在 灯火 羡 再 处 | 


图 3.6 比较 3 种 文本 对 齐 效果 


他 提示 : CSS3 为 text-align 属性 新 增多 个 属性 值 ， 简 单 说 明 如 下 。 
回 justify: 内 容 两 端 对 齐 (CSS2 曾经 支持 过 ， 后 来 放弃 ) 。 
四 start: 内 容 对 齐 开 始 边界 。 | 
回 end: 内 容 对 齐 结束 边界 。 
回 “match-parent: 与 inherit ( 继承 ) 表现 一 致 。 | 
回 justify-all: 效果 等 同 于 justify， 但 还 会 让 最 后 一 行 也 两 端 对 齐 。 
由 于 大 部 分 浏览 器 对 这 些 新 属性 值 支 持 不 是 很 友好 ， 读 者 可 以 暂时 忽略 。 


【拓展 】 
text-align 属性 仅 对 行内 对 象 有 效 ， 如 文本 、 图 像 、 超 链接 等 ， 如 果 想 让 块 元 素 对 齐 显示 ， 如 设计 
网 页 居中 显示 ， 设 计 <div> 标 签 右 对 齐 等 ， 则 需要 特殊 方法 ， 感 兴趣 的 读者 可 以 扫 码 深入 阅读 。 
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3.2.2 ”定义 垂直 对 齐 


使 用 CSS3 的 vertical-align 属性 可 以 定义 文本 垂直 对 齐 ， 用 法 如 下 : 
vertical-align: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length 


取 值 简单 说 明 如 下 。 
auto 将 根据 layout-flow 属性 的 值 对 齐 对 象 内 容 。 
baseline 为 默认 值 ， 表 示 将 支持 valign 特性 的 对 象 内 容 与 基线 对 齐 。 
sub 表示 垂直 对 齐 文本 的 下 标 。 
super 表示 垂直 对 齐 文 本 的 上 标 。 
top 表示 将 支持 valign 特性 的 对 象 的 内 容 对 象 项 端 对 齐 。 
text-top 表示 将 文 持 valign 特性 的 对 象 的 文本 与 对 象 项 端 对齐 。 
middle 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 。 
bottom 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 底 端 对 齐 。 
text-bottom 表示 将 文 持 valign 特性 的 对 象 的 文本 与 对 象 底 端 对 齐 。 
length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 者 百分数 ， 可 为 负数 ， 定 义 由 基线 算 起 
的 偏 移 量 ， 基 线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0%。 
【示例 】 新 建 testl.html 文档 ， 在 <head> 标 签 内 添加 <style type='"text/css"> 标 签 ， 定 义 一 个 内 部 样 
式 表 ， 然 后 输入 下 面 样式 ， 定 义 上 标 类 样式 。 


-super {vertical-align:super;} 

然后 在 <body> 标 签 中 输入 一 行 段 落 文本 ， 并 应 用 该 上 标 类 样式 。 
<p>vertical-align 表示 垂直 <span class=" super "> 对 齐 </span> 属 性 </p> 
在 浏览 器 中 预先 ， 则 显示 效果 如 图 3.7 所 示 。 


罗 办 办 办 办 办 办 办 办 加 


Xx 
DE 
vertical-align 表 示 垂 直 对 齐 属 性 


图 3.7 文本 上 标 样式 效果 


【拓展 】 
vertical-align 属性 仅 对 行内 对 象 有 效 ， 如 文本 、 图 像 、 超 链接 等 ， 如 果 想 让 块 元 素 对 齐 显示 ， 需 


”要 特殊 方法 ， 感 兴趣 的 读者 可 以 扫 码 深入 阅读 。 
3.2.3 定义 文本 间距 


使 用 CSS3 的 letter-spacing 属性 可 以 定义 字 距 ， 使 用 CSS3 的 word-spacing 属性 可 以 定义 词 距 。 
这 两 个 属性 的 取 值 都 是 长 度 值 ， 由 浮 点 数字 和 单位 标识 符 组 成 ， 默 认 值 为 normal， 表 示 默 认 间 陋 。 
定义 词 距 时 ， 以 空格 为 基准 进行 调节 ， 如 果 多 个 单词 被 连 在 一 起 ， 则 被 word-spacing 视 为 一 个 单 


， 词 ;如 有 果 汉 和 字 被 空格 分 隅 ， 则 分 隔 的 多 个 汉字 就 被 视 为 不 同 的 单词 ，word-spacing 属性 此 时 有 效 。 
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【示例 】 下 面 示例 演示 如 何 定义 字 距 和 词 距 样式 。 | 
新 建 一 个 网 页 ,保存 为 testhtml， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 一 个 内 部 ， 
样式 表 ， 然 后 输入 下 面 样式 ， 定 义 两 个 类 样式 。 | 


.lspacing {letter-spacing: lem:} 上 族 字 距 样式 类 */ | EP 
.wspacing {word-spacing: lem:} /# 词 距 样式 类 各 Wa 
然后 在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 应 用 上 面 两 个 类 样式 。 Note 


<p class="lspacing">letter spacing word spacing ( 字 间 距 ) </p> 
<p class="wspacing">letter spacing word spacing ( 词 间距 ) </p> 


在 浏览 器 中 预览 ， 则 显示 效果 如 图 3.8 所 示 。 从 图 中 可 以 直观 地 看 到 ， 所 谓 字 距 就 是 定义 字母 之 ， 
间 的 间距 ， 而 词 距 就 是 定义 西 文 单词 的 距离 。 


各 > [el htip://localhost/rmysite/test.htm 


| cec ttre™r ss parc in eg w ord :pacing ( 闻 间 让 ) 


letter spacing word ”spacing《 词 得 距 》 | 


图 3.8 字 距 和 词 距 演示 效果 比较 


< 外 注意 : 字 距 和 词 距 一 般 很 少 使 用 ， 使 用 时 应 慎重 考虑 用 户 的 阅读 体验 和 感受 。 对 于 中 文 用 户 来 说 ， 
letter-spacing 属性 有 效 ， 而 word-spacing 属性 无 效 。 


3.2.4 定义 行 高 
使 用 CSS3 的 line-height 属性 可 以 定义 行 高 ， 用 法 如 下 : 
line-height : normal | length 
其 中 normal 表示 默认 值 ， 一 般 为 1.2em: length 表示 百分比 数字 ,或 者 由 浮 点 数字 和 单位 标识 符 
组 成 的 长 度 值 ， 允 许 为 负 值 。 | 


【示例 】 新 建 test.html 文档 ， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样 | 
式 表 ， 输 入 下 面 样式 ， 定 义 两 个 行 高 类 样式 。 


.pl {/* 行 高 样式 类 1*/ 
line-height: lem: /# 行 高 为 一 个 字 大 小 #/ 


} 

.p2 {/* 行 高 样式 类 2*/ | 
line-height:2em: 放行 高 为 两 个 字 大 小 */ ] 
} | 
然后 在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 应 用 上 面 两 个 类 样式 。 


<hl> 人 生 三 境界 <hl> 

<h2> 出 自 王 国 维 《人 间 词 话 》</h2> 

<p class="p1"> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 : "昨夜 西风 凋 碧 树 。 独 上 高 楼 ， 望 断 天 涯 路 。 
"此 第 一 境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 翌 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 荞 然 回 首 ， 那 人 却 在 灯火 
痣 珊 处 。" 此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 如 以 此 意 解释 诸 词 ， 恐 为 曼 欧 诸 公 所 不 许 也 。</p> 


。53 。 


ee (sss 网页 统计 以 入 门 到 精通 (被 梨 精 编 版) 


<p class="p2"> 笔 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 逾 越 它 却 不 是 那么 简单 。 成 功 人 士 果敢 
坚忍 ， 不 屈 不 挠 ， 造 就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 逾越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 功 
后 回 望 来 路 的 人 ， 才 会 明白 另 解 这 三 重 境界 的 话 : 看 山 是 山 , 看 水 是 水 ; 看 山 不 是 山 , 看 水 不 是 水 ; 看 山 还 是 山 ， 
看 水 还 是 水 。</p> 


在 浏览 器 中 预览 ， 则 显示 效果 如 图 3.9 所 示 。 


把- 一 Ss hitp://localhnast/mysitafinst. ntml 


人 生 三 境界 
出 自 王国 维 《 人 间 词 话 》 


古今 之 成 大 事业 、 大 学 问 者 ， | " 放 夜 西风 凋 牧 树 。 人 望 断 天 沽 路 。" 此 第 
一 境 也 ,。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 展 惊 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 墓 然 回首， 那 人 却 在 
"此 第 三 境 也 。 旭 等 语 久 靠 关 洒 人 人 林 能 证- 然 下 以 此 意 解释 省 词 ， 丽 为 县 欧 诸 公所 不 许 


签 者 认为 ， 凡 人 都 丁 以 从 容 地 做 到 第 二 境界 ， 但 如 想 途 越 它 却 不 是 那么 简单 。 成 功 人 士 果 了 到 坚忍 ， 不 
届 不 找 ， 造 就 了 他 科 不 局 于 凡人 的 成 功 。 亿 们 但 越 的 不 仅仅 是 人 人生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 
功 后 回 泌 来 路 的 人 ， 才 会 明白 另 解 这 三 重 境 界 的 话 : 看 山 是 山 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 
水 ; 看 山 还 是 山 ， 看 水 还 是 水 。 


图 3.9 段落 文本 的 行 高 演示 效果 


【拓展 】 
line-height 属性 的 用 法 比较 复杂 ， 有 灵活 使 用 该 属性 ， 可 以 设计 很 多 特殊 效果 ， 感 兴趣 的 读者 可 以 


3.2.5 定义 首 行 缩 进 
使 用 CSS3 的 text-indent 属性 可 以 定义 文本 首 行 缩 进 ， 用 法 如 下 : 


text-indent: length 


length 表示 百分比 数字 或 者 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 建 议 在 设置 缩 
进 单 位 时 ， 以 em 为 设置 单位 ，em 表示 一 个 字 距 ， 这 样 可 以 比较 精确 地 确定 首 行 缩 进 效果 。 
【示例 1】 使 用 text-indent 属性 设计 首 行 缩 进 效果 。 
新 建 test.html 文档 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 输 
入 下 面 样式 ， 定 义 段 落 文本 首 行 缩 进 2 个 字 距 。 


p {text-indent:2em:} 人/# 首 行 缩 进 2 个 字 距 */ 
然后 在 <body> 标 签 中 输入 如 下 标题 和 上 段落 文本 。 


<hl> 人 生 三 境界 </h1> 

<h2> 出 自 王国 维 《 人 间 词 话 》</h2> 

<p> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 : "昨夜 西风 凋 腰 树 。 独 上 高 楼 ， 望 断 天 涯 路 。" 此 第 一 
境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 痣 珊 处 。 
"此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 如 以 此 意 解释 诸 词 ， 恐 为 受 欧 诸 公 所 不 许 也 。</p> 

<p> 笔 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 傅 越 它 却 不 是 那么 简单 。 成 功 人 士 果敢 坚忍 ， 不 届 
不 找 ， 造 就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 逾越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 功 后 回 望 来 路 
的 人 ， 才 会 明白 男 解 这 三 重 境 界 的 话 : 看 山 是 山 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 水 ; 看 山 还 是 山 ， 看 水 还 是 
水 。</p> 


。 DA4。 
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在 浏览 器 中 预览 ， 则 可 以 看 到 文本 缩 进 效果 ， 如 图 3.10 所 示 。 
【示例 2】 使 用 text-indent 属性 设计 悬垂 缩 进 效 果 。 


新 建 一 个 网 页 ， 保 存 为 testl.htm1， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 
部 样式 表 。 输 入 下 面 样式 ， 定 义 段 落 文本 首 行 缩 进 负 的 2 个 字 距 ， 并 定义 左 侧 内 部 补 白 为 2 个 字 距 。 


p {l* 悬 垂 缩 进 2 个 字 距 */ 
text-indent:-2em: 计 首 行 缩 进 */ 
padding-left:2em: /# 左 侧 补 白头 
} 


text-indent 属性 可 以 取 负 值 ,定义 左 侧 补 白 ,防止 取 负 值 缩 进 导致 首 行 文本 伸 到 段落 的 边界 外 边 。 


然后 在 <body> 标 签 中 输入 如 下 标题 和 段落 文本 。 


<hl>《 人 间 词 话 》 节 选 <hl> 
<h2> 王 国 维 </h2> 


<p> 上 古今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 : "昨夜 西 风 凋 天 树 。 独 上 高 楼 ， 望 断 天 涯 路 。" 此 第 一 
境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 翌 。" 此 第 二 境 也 。" 众 里 寻 他 干 百度 ， 获 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 
"此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 下 以 此 意 解释 诸 词 ， 恐 为 受 欧 诸 公所 不 许 也 。</p> 

<p> 笔 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 逾 越 它 却 不 是 那么 简单 。 成 功 人 士 果 敢 坚 絮 ， 不 屈 


不 挠 ， 造就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 途 越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 功 后 回 望 来 路 


的 人 ， 才 会 明白 男 解 这 三 重 境 界 的 话 : 看 山 是 山 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 水 ; 看 山 还 是 山 ， 看 水 还 是 


水 。</p> 
在 浏览 器 中 预览 ， 则 可 以 看 到 文本 芯 垂 缩 进 效 果 ， 如 图 3.11 所 示 。 


人 生 三 境界 《人 间 词 话 》 和 节选 
出 自 王国 维 《 人 间 词 话 》 王国 维 


古今 之 成 大 事业 、 大 学问 者 ， 必 经 过 三 种 之 境界 ，" 昨 夜 西风 调 登 树 。 独 在 念 之 成 太 训 业 、 太 学 问 着 ， 必 经 过 三 种 之 境界 ，" 昨 夜 西风 调配 树 。 独 上 高 


士 高 榜 ， 妄 断 天 涯 路 。" 此 第 一 境 也 。" 衣 市 潮 寅 图 不 悔 ， 为 伊 消 得 人 慌 
,第 二 境 世 。" 众 里 寻 他 干 百度 ， 车 代 回 首 ， 那 人 却 在 灯火 立 末 处 。" 此 尺 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 装 然 回首 ， 


鳞 三 入 此 等 语 和 车 非 大 词 人 不 能 着。 然 加 以 此 意 解 释 请 词 ， 芍 为 县 欧 诸 公 所 
不 许 也 为 量 欧 诸 公 


笔者 认为 ， TT i .但 要 想 谊 越 它 却 不 是 那么 简 笔者 认为 ， da 
。 坚 克 造就 了 他 Gn a 2 成 功 人 十 果敢 坚忍 ， 不 居 不 找 ， 


楼 ， 望 断 天 涯 路 - "此 第 一 境 也 。" 衣 市 潭 宽 终 和 不 慨 ， 为 伊 消 得 人 慌 


那 人 却 在 灯火 周 惠 


处 。" 此 第 三 三 撞 世 。 此 等 语 半 非 大 亲信 不 能 首 。 从 这 以 这 关 角 格 记 您 


境界 ， 人 
造就 了 他们 和 在 同 于 凡人 的 成 功 。 他 们 谊 越 


| 更 是 他 们 自我 的 极限 。 . 成 信人 加 望 丰 路 的 人 ， 才 
三 重 境 界 的 话 ， i 是 山 


会 明日 另 解 这 
是 水 : 看 山 还 是 山 ， 看 水 还 是 水 


;站 水 是 水 ; 看 山 不 是 山 ， 看 水 不 


图 3.10 ” 首 行 缩 进 效果 图 3.11 其 垂 缩 进 效果 


3.3 设计 图 像样 式 


在 CSS 没有 普及 前 ， 主 要 使 用 <img> 标 签 的 属性 来 控制 图 像样 式 ， 如 大 小 、 边 框 、 位 置 等 。 使 用 
CSS 可 以 更 方便 地 控制 图 像 显示 , 设计 各 种 特殊 效果 , 这 种 用 法 也 符合 W3C 标准 , 是 现在 推荐 的 用 法 。 


3.3.1 定义 图 像 大 小 


<img> 标 签 包含 width 和 height 属性 ， 使 用 它们 可 以 控制 图 像 的 大 小 。 
准 的 width 和 height 属性 ， 使 用 这 两 个 属性 可 以 更 灵活 地 设计 图 像 大 小 。 


。 DO。 


不 过 CSS 提供 了 更 符合 标 


Note 
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【示例 1】 下 面 是 一 个 简单 的 使 用 CSS 控制 图 像 大 小 的 示例 。 
启动 Dreamweaver， 新 建 网 页， 保存 为 testl.html， 在 <body> 标 签 内 输入 以 下 代码 。 


<img class="w200" src="images/1.jpg" /> 
<img class="w200" src="i1mages/2.jpg" /> 
<img class="Ww200" src="i1mages/3.Jjpg" /> 


<lmg src="1mages/4.jpg" /> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 以 


”类 样式 的 方式 控制 网 页 中 图 片 的 显示 大 小 。 


-W200 {定义 控制 图 像 高 度 的 类 样式 */ 
height:200px; 
} 


显示 效果 如 图 3.12 所 示 ， 可 以 看 到 使 用 CSS 更 方便 控制 图 片 大 小 ， 提 升 了 网 页 设计 的 灵活 性 。 


” 当 图 像 大 小 取 值 为 百分比 时 ， 浏 览 器 将 根据 图 像 包含 框 的 宽 和 高 进行 计算 。 


【示例 2】 本 示例 统一 定义 图 像 缩小 50%， 然 后 分 别 放 在 网 页 中 和 一 个 固定 大 小 的 盒子 中 ， 则 显 


， 示 效果 截然 不 同 ， 比 较 效果 如 图 3.13 所 示 。 


<style type="text/css"> 
div {/* 定 义 固定 大 小 的 包含 框 */ 


height:200px:; 诺 固 定 高 度 */ 
width:50%%: 上 谍 设 计 弹 性 宽度 */ 
border:solid 1px red: 六 定义 一 个 逻 奏 攻 

} 

img {/* 定 义 图 像 大 小 */ 
width:50%: 访 百 分 比 宽度 */ 
height:S094: 诺 百 分 比 高 度 */ 

} 

</style> 


<div> <img src="i1mages/4.png" /> </div> 
<img src="1mages/4.png" /> 


图 3.12 固定 缩放 图 像 图 3.13 百分比 缩放 图 像 


会 提示 : 当 仅 为 图 像 定义 宽度 或 高 度 时 ， 则 浏览 器 能 够 自动 调整 纵横 比 ， 使 宽 和 高 能 够 协调 缩放 ， 
避免 图 像 变 形 。 但 是 一 旦 同时 为 图 像 定义 宽 和 高 ， 就 要 注意 宽 高 比 ， 否 则 会 失真 。 


。 DB 。 
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3.3.2 ”定义 图 像 边框 
图 像 在 默认 状态 下 不 会 显示 边框 ， 但 在 为 图 像 定 义 超 链接 时 会 自动 显示 2px 一 3px 宽 的 蓝 色 粗 边 | 
框 。 使 用 border 属性 可 以 清除 这 个 边框 ， 代 码 如 下 : 一 一 
<a href="#"><img src="images/login.gif" alt=" 登 录 " border="0" /></a> Note 
不 推荐 上 述 用 法 ， 建 议 使 用 CSS 的 border 属性 定义 。CSS 的 border 属性 不 仅 可 以 为 图 像 定 义 边 


框 ， 还 提供 了 丰富 的 边框 样式 ， 支 持 定 义 边框 的 粗细 、 颜 色 和 样式 。 
【示例 1】 针 对 上 面 的 清除 图 像 边框 效果 ， 使 用 CSS 定义 则 代码 如 下 : 


img {/* 清 除 图 像 边 框 */ 
border:none: | 
} | 


使 用 CSS 为 <img> 标 签 定义 无 边框 显示 ， 这 样 就 不 再 需要 为 每 个 图 像 定义 0 边框 的 属性 。 下 面 分 
别 讲解 图 像 边框 样式 、 颜 色 和 宽度 的 详细 用 法 。 


1. 边框 样式 


CSS 为 元 素 边框 定义 了 众多 样式 ， 边 框 样式 可 以 使 用 border-style 属性 来 定义 。 边 框 样式 包括 两 ， 
种 ， 虚线 框 和 实 线 框 。 / 
(1) 虚线 框 包括 dotted (点 ) 和 dashed (虚线 )。 | 
【示例 2】 在 下 面 示例 中 , 分 别 定义 两 个 不 同 的 点 线 和 虚线 类 样式 , 然后 分 别 应 用 到 两 幅 图 像 上 ， 
效果 如 图 3.14 所 示 ， 通 过 比较 可 以 看 到 点 线 和 虚线 的 细微 差异 。 
<style type="text/css"> 
img {width:250px:; margin:12px:;} /* 固 定 图 像 显 示 大 小 */ 
.dotted {/* 点 线 框 样式 类 */ 
border-style:dotted:} 
.dashed {/* 虚 线 框 样式 类 */ 
border-style:dashed:; 


} 

</style> 

<img class="dotted" src="images/1.png" alt=" 点 线 边 框 " /> 
<img class="dashed" src="images/1.png" alt=" 虚 线 边 框 " /> 


| 8 nep/nocattost e080/mysit - sc 


图 3.14 正 浏 览 器 中 点 线 和 虚线 的 比较 效果 | 
(2) 实 线 框 包括 实 线 框 (solid)、 双 线 框 (double)、 立 体 四 槽 〈groove)、 立 体 目 槽 (ridge)、 立 


.57。 


于 
NN 
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体 四 边 (inset)、 立 体 凸 边 (outset)。 其 中 实 线 框 solid 是 应 用 最 广 的 一 种 边框 样式 。 

您 提示 : 双 线 框 由 两 条 单线 和 中 间 的 空隙 组 成 ， 三 者 宽度 之 和 等 于 边框 的 宽度 。 但 是 双 线 框 的 值 分 
配 也 会 存在 一 些 矛盾 ， 无 法 做 到 平均 分 配 。 如 果 边 框 宽度 为 3px， 则 两 条 单线 与 其 间 空 陈 
分 别 为 1px; 如 果 边 框 宽度 为 4pX， 则 外 侧 单 线 为 2px， 内 侧 和 中 间 空 际 分 别 为 1px; 如 果 
边框 宽度 为 Spbx， 则 两 条 单线 宽度 为 2px， 中 间 空 障 为 px。 其 他 取 值 依 此 类 推 。 


2. 边框 颜色 和 宽度 
使 用 CSS 的 border-color 属性 可 以 定义 边框 的 颜色 ; 使 用 border-width 属性 可 以 定义 边框 的 宽度 。 


” 当 元 素 的 边框 样式 为 none 时 ， 所 定义 的 边框 颜色 和 边框 宽度 都 会 同时 无 效 。 在 默认 状态 下 ， 元 素 的 
”边框 样式 为 none， 而 元 素 的 边框 宽度 默认 为 2 一 3px。 


【示例 3】 在 下 面 示例 中 快速 定义 图 像 各 边 的 边框 ， 显 示 效 果 如 图 3.15 所 示 。 
<style type="text/css"> 


img {/* 图 像 的 边框 样式 */ 
width:100px: /#* 宽 度 #/ 
border:solid red 150px: /# 统 一 定义 各 边 样式 : 实 线 框 、 红 色 、120px 宽度 */ 
border-color:red blue green yellow: 诺 顶 边 红 色 、 右 边 蓝 色 、 底 边 绿色 、 左 边 黄色 */ 

} 

</style> 


<img src="i1mages/l1.png" /> 


【示例 4】 下 面 示例 配合 使 用 不 同 复合 属性 自 定义 各 边 样式 ， 分 别 用 border-style、border-color 


”和 border-width 属性 自 定义 图 像 各 边 边框 样式 ， 效 果 如 图 3.16 所 示 。 


<style type="text/css"> 


img {* 图 像 的 边框 样式 */ 
width:300px: /宽度 4/ 
border-style:solid dashed dotted double: 诺 顶 边 实 线 、 右 边 虚线 、 底 边 点 线 、 左 边 双 线 */ 
border-width:10px 20px 30px 40px: 话 顶 边 10px、 右 边 20px、 底 边 30px、 左 边 40px*/ 
border-color:red blue green yellow: /* 顶 边 红 色 、 右 边 蓝 色 、 底 边 绿 色 、 左 边 黄色 名 

} 

</style> 


<1img src="i1mages/1.png" /> 


图 3.15 定义 各 边 边框 的 样式 效果 图 3.16 日 定义 各 边 边框 的 样式 效果 
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如 果 各 边 样 式 相 同 ， 使 用 border 会 更 方便 设计 。 
【示例 $】 下 面 示例 定义 各 边 样式 为 红色 实 线 框 ， 宽 度 为 20px。 


div { 
width:400px: /# 宽 度 #/ 
height:200px; /# 高 度 #/ 
border:solid 20px red: 诺 边 框 样式 */ 
} 


在 上 面 代码 中 ，border 属性 中 的 3 个 值 分 别 表示 边框 样式 、 边 框 宽 度 和 边框 颜色 ， 它 们 没有 先后 


顺序 ， 可 以 任意 调整 顺序 。 
3.3.3 ”定义 个 透明 度 
在 CSS3 中 ， 使 用 opacity 可 以 设计 图 像 的 不 透明 度 。 该 属性 的 基本 用 法 如 下 : 
opacity:0~1; 
参数 取 值 范围 为 0 一 1， 数 值 越 小 ， 透 明度 越 高 ，0 为 完全 透明 ， 而 1 表示 完全 不 透明 。 
会 提示 : 早期 下 浏览 器 使 用 CSS 滤 镜 定义 透明 度 ， 基 本 用 法 如 下 : 
filter:alpha(opacity=0~100); 
参数 取 值 范围 为 0 一 100， 数 值 越 小 ， 透 明度 越 高 ，0 为 完全 透明 ，100 表示 完全 不 透明 。 


【示例 】 在 下 面 这 个 示例 中 ， 先 定义 一 个 透明 度 样式 类 ， 然 后 把 它 应 用 到 图 像 中 ， 并 与 原 图 进行 


比较 ， 演 示 效 果 如 图 3.17 所 示 。 
<style type="text/css"> 


Img {width:300px:;} 

.opacity {/* 透 明度 样式 类 */ 
opacity: 0.3; 诬 标 准 用 法 */ 
filter:alpha(opacity=30); /# 兼 容 正 早期 版 本 浏览 器 */ 
-moz-opacity:0.3: /# 兼 容 Firefox 浏览 器 */ 

} 

</style> 


<img src="images/1.png" title=" 图 像 不 透明 度 " /> 
<img class="opacity" src="images/1.png" title=" 图 像 透 明度 为 0.3" /> 


x 
二 一 : 和 营 htro://localhost:8080/mysita/jtesti.html vv 昌 地 手 六 泛 


图 3.17 图 像 透 明度 演示 效果 
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(Csss 网页 设计 从 入门 到 精通 ( 微 课 精 编 版 ) 


CSS3 新 增 了 border-radius 属性 ， 使 用 它 可 以 设计 圆 角 样式 。 该 属性 用 法 如 下 : 
border-radius:none | <length>11.4} [/ <length>{1.,4}1?; 


border-radius 属性 初始 值 为 none, 适用 于 所 有 元 素 , 除了 border-collapse 属性 值 为 collapse 的 table 


元 素 。 取 值 简 单 说 明 如 下 。 

加 ”none: 默认 值 ， 表 示 元 素 没 有 圆 角 。 

加”<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 
为 了 方便 定义 元 素 的 4 个 项 角 圆 角 ，border-radius 属性 派生 了 4 个子 属性 。 
border-top-right-radius: 定义 右上 角 的 圆 角 。 

加 ”border-bottom-right-radius: 定义 右 下 角 的 圆 角 。 
border-bottom-left-radius: 定义 左下 角 的 圆 角 。 

加 ”border-top-left-radius: 定义 左上 角 的 圆 角 。 


会 提示 : border-radius 属性 可 包含 两 个 参数 值 : 第 一 个 值 表示 圆 角 的 水 平 半径 ， 第 二 个 值 表示 圆 角 的 
垂直 半径 ， 两 个 参数 值 通过 斜 线 分 隔 。 如 果 仅 包含 一 个 参数 值 ， 则 第 二 个 值 与 第 一 个 值 相 
同 , 它 表示 这 个 角 是 一 个 四 分 之 一 圆 角 。 如 果 参 数值 包含 0， 则 就 是 矩形 ， 不 会 显示 为 圆 角 。 


| 【示例 】 下 面 示例 分 别 设计 两 个 圆 角 类 样式 ， 第 一 个 类 rl 为 固定 12px 的 圆 角 ， 第 二 个 类 Z2 为 
”弹性 取 值 50% 的 椭圆 圆 角 ， 然 后 分 别 应 用 到 不 同 的 图 像 上 ， 演 示 效 果 如 图 3.18 所 示 。 


<style type="text/css"> 

Img {width:300px;:;border:solid lpx #eee:} 

IT] {border-radius:12px:} 

.12 {border-radius:50%;} 

</style> 

<img class="r1" src="images/1.png" title=" 圆 角 图 像 " /> 
<img class="r2" src="images/1.png" title=" 棚 圆 图 像 " /> 


| EE http:/Nocalhost:38080/ rmysite/test1.html 


| | 图 3.18 圆 角 图 像 演示 效果 
_ 3.3.5 “定义 阴影 特效 


CSS3 新 增 了 box-shadow 属性 ， 该 属性 可 以 定义 阴影 效果 。 该 属性 用 法 如 下 : 
box-shadow:none | <shadow> [, <shadow>|]*: 
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box-shadow 属性 的 初始 值 是 none， 该 属性 适用 于 所 有 元 素 。 取 值 简单 说 明 如 下 。 
加 ”none: 默认 值 ， 表 示 元 素 没有 阴影 。 
加 ”<shadow>: 该 属性 值 可 以 使 用 公式 表示 为 inset && [ <length>{2,4} && <color>?]， 其 中 inset 


表示 设置 阴影 的 类 型 为 内 阴影 ， 默 认为 外 阴影 <length> 是 由 浮 点 数字 和 单位 标识 符 组 成 的 ， 
长 度 值 ， 可 取 正 值 或 负 值 ， 用 来 定义 阴影 水 平 偶 移 、 垂 直 偶 移 ， 以 及 阴影 大 小 〈 即 阴影 模糊 


度 ) 、 阴 影 扩 展 。<color> 表 示 阴 影 颜 色 。 


会 提示 : 如 果 不 设置 阴影 类 型 ， 默 认为 投影 效果 ， 当 设置 为 inset 时 ， 则 阴影 效果 为 内 阴影 。 义 轴 
偏 移 和 立 轴 偏 移 定义 阴影 的 偏 移 距 离 。 阴 影 大 小 、 阴 影 扩展 和 阴影 颜色 是 可 选 值 ， 默 认 
为 黑色 实 影 。 box-shadow 属性 值 必 须 设置 阴影 的 偏 移 值 ， 否 则 没有 效果 。 如 果 需 要 定义 阴 


影 ， 不 需要 偏 移 ， 此 时 可 以 定义 阴影 偏 移 为 0， 这样 才 可 以 看 到 阴影 效果 。 


【示例 1】 在 下 面 这 个 示例 中 ， 设 计 一 个 阴影 类 样式 ， 定 义 圆 角 、 阴 影 显 示 ， 设 置 圆 角 大 小 为 8px， 


阴影 显示 在 右 下 角 ， 模 糊 半径 为 14px， 然 后 分 别 应 用 到 第 二 幅 图 像 上 ， 演 示 效 果 如 图 3.19 所 示 。 
<style type="text/css"> 


Img {width:300px:; margin:6px;} 

1 
border-radius:8px; 
-moz-box-shadow:8px 8px 14px #06C: /* 兼 容 Gecko 引擎 #/ 
-webkit-box-shadow:8px 8px 14px #06C: /# 兼 容 Webkit 引擎 */ 
box-shadow:8px 8px 14px #06C: 诬 标 准 用 法 */ 

} 

</style> 


<img src="images/1.png" title=" 无 阴影 图 像 " /> 
<img class="r1" src="images/1.png" title=" 阴 影 图像 " /> 


图 3.19 ”阴影 图 像 演示 效果 


【示例 2】box-shadow 属性 用 法 比较 灵活 ， 可 以 设计 车 加 阴影 特效 。 例 如 ， 在 上 面 示 例 中 ,修改 ， 
类 样式 rl 的 代码 如 下 ， 通 过 多 组 参数 值 定义 渐变 阴影 效果 ， 如 图 3.20 所 示 。 | 


Img {width:300px:; margin:6px;} 
了 
border-radius: 12px:; 
box-shadow:-10px 0 12px red, 
10px 0 12px blue, 
0 -10px 12px yellow, 
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图 3.20 设计 图 像 多 层 阴 影 效 果 


”全 提示 : 当 设计 多 个 阴影 时 ， 需要 注意 书写 顺序 ， 最 先 写 的 阴影 将 显示 在 最 顶层 .如 在 上 面 这 段 代 
码 中 ， 先 定义 一 个 10px 的 红色 阴影 ， 再 定义 一 个 10px 大 小 、10px 扩展 的 阴影 。 显 示 结 果 
就 是 红色 阴影 层 履 盖 在 黄色 阴影 层 之 上 ， 此 时 如 果 顶 层 的 阴影 太 大 ， 就 会 遮盖 底部 的 阴影 。 


34 案例 实战 


CSS3 优化 和 增强 了 CSS2.1 的 字体 和 文本 属性 , 使 网 页 文字 更 具 表 现 力 和 感染 力 , 丰富 了 网 页 文 
本 的 样式 和 版 式 。 


”3.4.1 设计 正文 版 式 1 


| 中 文 版 式 与 西 文 版 式 存 在 很 多 不 同 。 例如， 中 文 段落 文本 缩 进 ， 而 西 文 基 垩 列表 ; 中 文 段落 一 般 
， 没 有 上 段 距 , 而 西 文 习惯 设置 一 行 的 段 距 等 。 中 文 报刊 文章 习惯 以 块 的 适度 变化 来 营造 灵活 的 设计 版 式 ， 
”中 文 版 式 中 , 标题 习惯 居中 显示 , 正文 之 前 喜欢 设计 一 个 题 引 , 题 引 为 左右 缩 进 的 段落 文本 显示 效果 ， 
正文 以 首 字 下 沉 效 果 显 示 。 
本 案例 将 展示 一 个 简单 的 中 文 版 式 , 分 别 设计 一 级 标题 、 二 级 标题 、 三 级 标题 和 段落 文本 的 样式 ， 
”从 而 使 信息 的 轻重 分 明 ， 更 有 利于 用 户 阅 读 ， 演 示 效 果 如 图 3.21 所 示 。 
| 【操作 步骤 】 
第 1 步 ， 设 计 网 页 结构 。 本 案例 的 HIML 文档 结构 依然 采用 禅 意 花 园 的 结构 ， 截 取 第 一 部 分 的 
， 绪 构 和 内 容 ， 并 把 英文 全 部 译 为 中 文 。 
<div 1d="intro"> 
<div 1d="pageHeader"> 
<hl><span>CSS Zen Garden</span></h1> 
<h2><span><acronym title="cascading style sheets">CSS</acronym> 设 计 之 美 </span></h2> 
</div> 
<div 1d="quickSummary"> 
<p class="p1"><span> 展 示 以 <acronym 
title="cascading style sheets">CSS</acronym> 技 术 为 基础 , 并 提供 超 强 的 视觉 冲击 力 。 只 要 选择 列表 中 任意 一 
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个 样式 表 ， 就 可 以 将 它 加 载 到 本 页 面 中 ， 并 呈现 不 同 的 设计 效果 。</span></p> 
<p class="p2"><span> 下 载 <atitle=" 这 个 页 面 的 HIML 源 代码 不 能 够 被 改动 。" 
href="http://www.csszengarden.com/zengarden-sample.html">HTML 文档 </a> 和 <a 
title=" 这 个 页 面 的 CSS 样式 表 文 件 ， 你 可 以 更 改 它 。" 
href="http://www.csszengarden.com/zengarden-sample.css">CSS 文件 </a>。</span></p> 
</div> 
<div 1d="preamble"> 
<h3><span> 启 蒙 之 路 </span></h3> Note 
<p class="p1"><span> 不 同 浏览 器 随意 定义 标签 ， 导 致 无 法 相互 兼容 的 <acronym 
title="document object model">DOM</acronym> 结 构 ， 或 者 提供 缺乏 标准 支持 的 <acronym 
title="cascading style sheets">CSS</acronym> 等 陋习 随处 可 见 ， 如今 当 使 用 这 些 不 兼容 的 标签 和 样式 时 , 设计 
之 路 会 很 坎坷 。</span></p> 
<p class="p2"><span> 现 在 ， 我 们 必须 清除 以 前 为 了 兼容 不 同 浏览 器 而 使 用 的 一 些 过 时 的 小 技巧 。 
感谢 <acronym 
title="world wide web consortium">W3C</acronym>、<acronym 
title="web standards project">WASP</acronym> 等 标准 组 织 ， 以 及 浏览 器 厂家 和 开发 师 们 的 不 懈 努 力 ， 我 们 终 
于 能 够 进入 Web 设计 的 标准 时 代 。</span></p> 
<p class="p3"><span>CSS Zen Garden〔 样 式 表 禅 意 花 园 ) 邀请 你 发 挥 自 己 的 想象 力 , 构思 一 个 专业 
级 的 网 页 。 让 我 们 用 惹眼 来 审视 ， 充 满 理想 和 激情 去 学 习 CSS 这 个 不 朽 的 技术 ， 最 终 使 自己 能 够 达到 技术 和 艺 
术 合 而 为 一 的 最 高 境界 。</span></p> 
</div> 
</div> 


ehocalhosnysie/ndexhin! Pp-Bacol@Wthgi | 
CSS Zen Garden 


CSS 设 计 之 美 


展示 以 Css 技术 为 基础 ， 并 提供 超 强 的 视觉 冲击 力 。 只 要 选择 列表 中 任意 一 个 样式 素 ， 就 可 以 将 它 加 载 到 本 页 
面 中 ， 并 呈现 不 同 的 设计 落果 ， 
下 载 HIML 文 档 和 Css 六 任 。 


司 蒙 之 路 


同 浏览 器 随意 定义 标签 ， 导 致 无 法 相互 菲 容 的 DOM 结 均 ， 或 者 提供 缺乏 标准 支持 的 C33 等 陋习 随处 可 见 ， 如 今 当 使 用 这 些 不 
兼容 的 标签 和 样式 时 ， 设 计 之 路 会 一 路 坎坷 。 
现在 ， 我 们 必须 清除 以 前 为 了 兼容 不 同 浏览 器 而 使 用 的 一 些 过 时 的 小 技巧 。 感 谢 W3C、WASP 等 标准 组 织 ， 以 及 浏览 器 厂 

家 和 开发 师 们 的 不 懈 努 力 ， 我 们 终于 能 够 进入 Wcb 设 计 的 标准 时 代 。 
CSS Zen Garden (样式 表 禅 音 花 园 ) 邀请 您 发 挥 自己 的 想象 力 ， 构 思 一 个 专业 级 的 网 页 。 让 我 们 用 慧眼 来 审视 ,充满 理想 和 激情 


去 学 习 CS5 这 个 不 配 的 按 术 ,最 终 使 目 己 能 够 达到 技术 和 艺术 合 而 为 一 的 最 高 境界 。 


图 3.21 报刊 式 中 文 格式 效果 
第 2 步 ， 定义 网 页 基本 属性 。 定 义 背 景色 为 白色 ， 字 体 为 黑色 。 大 多 数 浏 览 器 默认 网 页 就 是 这 个 


样式 ， 但 是 考虑 到 部 分 浏览 器 会 以 灰色 背景 显示 ， 显 式 声 明 这 些 基 本 属性 会 更 加 安全 。 字 体 大 小 为 
14px， 字 体 为 宋体 。 


body {页 面 基本 属性 */ 
background:#fff: 此 背景 色 */ 
color:#000: 上 * 前 景色 */ 
font-size:0.875em: 诺 网 页 字体 大 小 */ 


广 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 -一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
i 
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font-family:" 新 宋体 ", Arial, Helvetica, sans-serif: /# 了 网 页 字体 默认 类 型 志 
} 


第 3 步 ， 定义 标题 居中 显示 ， 适 当 调 整 标题 底 边 距 ， 统 一 为 一 个 字 距 。 间 距 设 计 的 一 般 规律 字 


” 距 小 于 行距 , 行距 小 于 段 距 , 段 距 小 于 块 距 。 检查 的 方法 可 以 尝试 将 网 站 的 背景 图 案 和 线条 全 部 去 掉 ， 


看 是 人 否 还 能 保持 想 要 的 区 块 感 。 


hl, h2, h3 {/* 标 题 样式 */ 
text-align:center; 诺 居 中 对 齐 */ 
margin-bottom: lem: 谨 定 义 底 边 界 */ 
} 


第 4 步 ， 为 二 级 标题 定义 一 个 下 男 线 ， 并 调 瞳 字体 颜色 ， 目 的 是 使 一 级 标题 、 二 级 标题 和 三 级 标 


” 题 在 同一 个 中 轴线 显示 时 产生 一 个 变化 ， 避 免 单调 。 由 于 三 级 标题 字数 少 〈4 个 汉字 )， 可 以 通过 适 
， 当 调节 字 距 来 设计 一 种 平衡 感 ， 避 免 因 为 字数 太 少 而 使 标题 看 起 来 很 单调 。 


h2 {个 性 化 二 级 标题 样式 */ 


color:#999: 话 字 体 颜 包 */ 
text-decoration:underline: 皮下 辆 线 */ 


} 
h3 {/# 个 性 化 三 级 标题 样式 #/ 
letter-spacing:0.4em:; /# 字 距 #/ 
font-size:1.4em: /# 字 体 大 小 癌 
} 
第 5 步 ， 定 义 段 落 文本 的 样式 。 统 一 清除 段落 间距 为 0， 定义 行 高 为 1.8 倍 字体 大 小 。 
Pp {l* 统 一 段落 文本 样式 所 


margin:0; / * 清 除 段 距 SE 
line-height:1.8em: 话 定 义 行 高 */ 


} 
第 6 步 ， 定 义 第 一 文本 块 中 的 第 一 段 文本 字体 为 深 灰 色 ， 定 义 第 一 文本 块 中 的 第 二 段 文本 右 对 齐 ， 
定义 第 一 文本 块 中 的 第 一 段 和 第 二 段 文 本 首 行 缩 进 两 个 字 距 ,同时 定义 第 二 文本 块 的 第 一 段 、 第 二 段 


”和 第 三 段 文 本 首 行 缩 进 两 个 字 距 。 


#quickSummary .pl {/* 第 一 文本 块 的 第 一 段 样式 */ 


color:#444: 刻字 体 颜 包 */ 
} 
#quickSummary .p2 {* 第 一 文本 块 的 第 二 上 段 样式 */ 

text-align:right: 谨 右 对 齐 */ 


} 
#quickSummary .p1, .p2, .p3 {除了 首 字 下 沉 段 以 外 的 段 样式 */ 
text-indent:2em: /* 首 行 缩 进 */ 
} 
第 7 步 ， 为 第 一 个 文本 块 定义 左右 缩 进 样式 ， 设 计 引 题 的 效果 。 
#quickSummary {/* 第 一 文本 块 样式 */ 
margin-left:4em:; 谍 左 缩 进 */ 
margin-right:4em; 让 右 缩 进 */ 
} 
第 8 步 ， 定 义 首 字 下 沉 效 果 。CSS 提供 了 一 个 首 字 下 沉 的 属性 : first-letter， 这 是 一 个 伪 对 象 。 什 


se。 4 。 


第 已 章 使 用 CSS3 美 化 文本 和 图 像 § 


么 是 伪 、 伪 类 和 伪 对 象 ， 我 们 将 在 超 链接 设计 章节 中 进行 详细 讲解 。 但 是 first-letter 属性 所 设计 的 首 


字 下 沉 效 果 存 在 很 多 问题 ， 所 以 还 需要 进一步 设计 。 例 如 ， 设 置 段落 首 字 浮动 显示 〈 什 么 是 浮动 请 参 


阅 CSS 布局 章节 讲解 )， 同 时 定义 文字 字号 很 大 ， 以 实现 下 沉 效果 。 为 了 使 首 字 下 沉 效果 更 明显 ， 这 


里 设计 首 字 加 粗 、 反 门 显示 。 
.first:first-letter {/* 首 字 下 沉 样 式 类 */ 


font-slze:S0PpX: 访 字 体 大 小 */ 

float:left: 上 庄 向 左 浮动 显示 */ 

margin-right:6px: 诺 增 加 右 侧 边 距 */ 

padding:2px: 谍 增 加 首 字 四 周 的 补 白 */ 

font-weight:bold: 诬 加 粗 字 体 */ 

line-height: lem: /# 定 义 行 距 为 一 个 字体 大 小 ， 避 免 行 高 影响 段落 版 式 状 
background:#000; /#* 背 景色 所 

color:#fff: /# 前 景色 #/ 


} 
< 外 注 意 : 由 于 正 早 期 版 本 浏览 器 存在 Bug， 无 法 通过 :first-letter 选择 器 来 定义 首 字 下 沉 效 果 ， 故 这 


里 重新 定义 了 一 个 首 字 下 沉 的 样式 类 (first ) ， 然 后 手动 把 这 个 样式 类 加 入 HTML 文档 结 


构 对 应 的 段落 中 。 


<p class='"pl first"><span> 不 同 浏览 器 随意 定义 标签 ， 导 致 无 法 相互 兼容 的 <acronym 
title="document object model">DOM</acronym> 结 构 ， 或 者 提供 缺乏 标准 支持 的 <acronym 


title="cascading style sheets">CSS</acronym> 等 陋习 随处 可 见 ， 如 今 当 使 用 这 些 不 兼容 的 标签 和 样式 


时 ， 设 计 之 路 会 很 坎坷 。</span></p> 
窑 提示 : 在 阅读 信息 时 ， 段 落 文本 的 呈现 效果 多 以 块 状 存在 。 如 果 说 单个 字 是 点 ， 一 行文 本 为 线 ， 


那么 段落 文本 就 成 面 了 ， 而 面 以 方形 呈现 的 效率 最 高 ， 网 站 的 视觉 设计 大 部 分 其 实 都 是 在 


拼 方 块 。 在 页 面 版 式 设计 中 ， 建 议 坚 持 如 下 设计 原则 。 

回 方块 感 越 强 ， 越 能 给 用 户 方向 感 。 

回 方块 越 少 ， 越 容 灸 阅读。 

回 方块 之 间 以 空白 的 形式 进行 分 隔 ， 从 而 组 合 为 一 个 更 大 的 方块 。 
其 他 样式 以 及 整个 案例 效果 请 参阅 本 节 实 例 源 代码 。 


3.4.2 设计 正文 版 式 2 


本 案例 将 展示 一 个 简单 的 层级 式 中 文 版 式 ， 将 一 级 标题 、 二 级 标题 、 三 级 标题 和 段落 文本 以 阶梯 ， 


状 缩 进 ， 从 而 使 信息 的 轻重 分 明 ， 更 有 利于 用 户 阅 读 ， 演 示 效 果 如 网 3.22 所 示 。 
【操作 步骤 】 
第 1 步 ， 复 制 3.4.1 节 示 例 源 代码 ， 删 除 所 有 的 CSS 内 部 样式 表 源 代码 。 


第 2 步 ， 定义 页 面 的 基本 属性 。 这 里 定义 页 面 背 景色 为 灰 绿 浅 色 ， 前 景色 为 深 黑 色 ， 字体 大 小 为 


0.87S5em ( 约 为 14px)。 


body {/#* 页 面 基本 属性 妆 
background:#99CC99;: /#* 背 景色 所 
color:#333333: /# 前 景色 〈 字 体 颜 色 ) */ 
margin: lem:; 诺 页 边 距 */ 
font-size:0.875em: /# 页 面 字体 大 小 #/ 

} 
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是 htpJjlecalhosty/mysitejindcxhtml 


| 图 3.22 层级 缩 进 式 中 文 版 式 效果 

| 第 3 步 ， 统 一 标题 为 下 画 线 样式 ， 且 不 再 加 粗 显 示 ， 限 定 上 下 边 距 为 1 个 字 距 。 在 默认 情况 下 ， 
不 同 级 别 的 标题 上 下 边界 是 不 同 的 。 适 当 调整 字 距 之 间 的 疏 密 。 

hl, h2, h3 {/* 统 一 标题 样式 */ 


font-weight:normal: 诺 正 常 字体 粗细 */ 
| text-decoration:underline: 谍 下 男 线 */ 
letter-spacing:0.2em:; 诺 增 加 字 距 */ 
] margin-top:lem: /# 固 定 上 边界 #/ 
margin-bottom: lem:; 旋回 定 下 边界 */ 


| } 
第 4 步 ， 分 别 定 义 不 同 标题 级 别 的 缩 进 大 小 ， 设 计 阶 梯 状 缩 进 效果 。 
hl {/* 一 级 标题 样式 */ 


| font-family:Arial, Helvetica, sans-serif: 记 标 题 无 衬 线 字体 */ 
margin-top:0.Sem: /# 缩 小 上 边 边界 #/ 

} 

] h2 {padding-left:lem:} /# 左 侧 缩 进 1 个 字 距 */ 
h3 {padding-left:3em:} /# 左 侧 缩 进 3 个 字 距 */ 
”第 5 步 ， 定 义 段落 文本 左 缩 进 ， 同 时 定义 首 行 缩 进 效果 。 清 除 段落 默认 的 上 下 边界 距离 。 
| p {/* 段 落 文本 样式 */ 

line-height:1.6em: /#* 行 高 8/ 

| text-indent:2em; 放 首 行 缩 进 */ 

| margin:0; /# 清 除 边界 所 

] padding:0; 启 清 除 补 白 */ 

| padding-left:Sem; 访 左 缩 进 */ 


3.5 和 在线 练习 


本 节 练 习 使 用 CSS 设计 各 种 文本 效果 、 网 页 版 式 ， 以 及 文本 特效 。 感 兴趣 的 读者 
可 自行 扫 码 练习 。 
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使 用 CSS3 设计 特效 文本 


CSS3 优化 和 增强 了 CSS2.1 的 字体 和 文本 属性 ， 使 网 页 文字 更 具 表 现 力 和 感染 力 ， 丰 富 了 
网 页 文本 的 样式 和 版 式 。 用 户 可 以 使 用 网 络 字体 定义 特殊 的 字体 类 型 ， 摆 脱 了 浏览 器 所 在 系 
统 字 体 的 局 限 ; 可 以 选择 更 多 的 色彩 模式 ， 创 建 灵 活 的 网 页 配色 体系 ; 通过 文本 阴影 ， 让 字 
体 看 起 来 更 美 ; 通过 动态 内 容 ， 让 网 页 内 容 不 再 单一 ,使 CSS 控制 网 页 内 容 的 显示 能 力 更 强 。 


【 学 习 重 点 】 

VI 了 解 CSS3 文本 模块 。 

Wl 正确 处 理 文 本 滋 出 和 换行 问题 。 
中 能够 使 用 CSS3 新 色彩 模式 。 
六 灵活 定义 文本 阴影 样式 。 

WD 灵活 添加 动态 内 容 。 
正确 使 用 网 络 字体 。 


Csss 网 页 设计 从 入 门 到 精通 ( 微 裸 精 编 版 ) 


4.1 CSS3 文 本 模块 


早期 CSS 文本 功能 就 是 设置 字体 、 字 号 、 颜 色 、 样 式 、 粗 细 、 间 距 等 。CSS3 的 文本 功能 不 再 局 
限于 这 些 基 本 设置 ， 它 优化 了 已 经 存在 的 各 个 属性 ， 整 合 了 各 种 不 兼容 的 私有 属性 ， 给 文本 添加 一 些 
高 级 属性 ， 并 作为 一 个 独立 的 模块 进行 开发 ， 以 尽快 完善 和 迭 代 CSS 文本 功能 。 


4.1.1 文本 模块 概述 
CSS3 文本 模块 〈TextModule) 把 与 文本 相关 的 属性 单独 进行 规范 。 文 本 模块 的 最 早 版 本 是 在 2003 


”年 制定 的 (http:/www.w3.org/TR/2003/CR-css3-text-20030514/), 2005 年 对 其 进行 了 修订 (http://www.w3. 


org/TR/2005/WD-css3-text-20050627/)，2007 年 又 进行 了 系统 更 新 (http://www.w3.org/TR/2007/WD- 
css3-text-20070306/)， 最 后 形成 了 一 个 较为 完善 的 文本 模型 (http://www.w3.org/TR/css3-text/)。 

在 最 终 版 本 的 文本 模块 中 ， 除 了 新 增 文 本 属性 外 ， 还 对 CSS2.1 版 本 中 己 定 义 的 属性 取 值 进行 修 
补 ， 增 加 了 更 多 的 属性 值 ， 以 适应 复杂 环境 中 文本 的 呈现 。 与 2003 年 版 本 相 比 ， 进 行 了 较 大 的 改动 ， 


其 中 主要 改动 说 明 如 下 。 


line-break 和 word-break-cjk 属性 被 word-break 属性 符 换 。 

word-break-inside 属性 被 hyphenate 属性 蔡 换 。 

wrap-option 属性 被 text-wrap 和 word-break 属性 蔡 换 。 
linefeed-treatment、white-space-treatment 和 all-space-treatment 属性 被 white-space-collapse 属 
性 蔡 换 。 

min-font-size 和 max-font-size 属性 被 移 至 下 一 个 CSS3 版 本 中 字体 模块 内 。 

修改 了 text-align 属性 中 left 和 right 属性 值 在 垂直 文本 中 的 行为 。 

text-align-last 属性 取消 了 size 属性 值 。 

text-justify 属性 取消 了 newspaper 属性 值 。 

word-spacing 和 letter-spacing 属性 增加 了 百分比 取 值 。 

text-wrap 属性 增加 了 suppress 属性 值 。 

删除 了 linefeed-treatment 属性 。 

text-align-last 属性 取消 了 size 属性 值 。 

text-justify 属性 新 增 了 tibetan 属性 值 。 

punctuation-trim 属性 新 增加 了 end 属性 值 。 

kerning-mode:contextual 被 punctuation-trim:adjacent 蔡 换 ， 其 他 控制 被 移 至 字体 模块 。 
text-shadow 属性 可 以 继承 。 

新 增 text-outline 属性 。 

新 增 text-emphasis 属性 ， 蔡 换 font-emphasis 属性 。 

重新 定义 了 text-indent 属性 。 

重新 设计 了 hanging-punctuation 属性 。 

最 新 版 本 的 文本 模型 与 2005 年 版 本 相 比 ， 也 进行 了 适当 修订 ， 其 中 增加 了 text-emphasis 和 


和 多 的 


和 人 人 人 人 人 办 办 凶 凶 多多 全 的 


”text-outline 属性 ， 移 出 了 font-emphasis 属性 ， 其 他 更 多 改动 细节 请 参阅 官方 文档 。 


es。 8 。 


第 4 企 章 使 用 CSS3 设计 特 致 文 杰 


4.1.2 ”文本 洪 出 
text-overflow 属性 可 以 设置 超 长 文本 省 略 显示 。 基 本 语法 如 下 : 


text-overflow: clip | ellipsis 

适用 于 块 状元 素 ， 取 值 简单 说 明 如 下 。 

clip: 当 内 联 内 容 洲 出 块 容器 时 ， 将 洲 出 部 分 裁 切 挥 ， 为 默认 值 。 
加 ”ellipsis: 当 内 联 内 容 洲 出 块 容器 时 ， 将 洲 出 部 分 蔡 换 为 “...”。 


会 提示 : 在 早期 W3C 文 档 ( http://www.w3.org/TR/2003/CR-css3-text-20030514/#textoverflow-mode ) 
中 ，text-overflow 被 纳入 规范 ， 但 是 在 最 新 修订 的 文档 ( http://www.w3.org/TR/css3-text/ ) 
中 没有 再 包含 text-overflow 属性 。 
由 于 W3C 规范 放弃 了 对 text-overflow 属性 的 支持 ， 所 以 Mozilla 类 型 浏览 器 也 放弃 了 对 该 = 
属性 的 支持 。 不 过 ，Meozilla developer center 推荐 使 用 -moz-binding 的 CSS 属性 进行 兼容 。 
Firefox 支持 XUL (XUL， 一 种 XML 的 用 户 界面 语言 ) ， 这 样 就 可 以 使 用 -moz-binding 属 ， 
性 来 绑 定 XUL 里 的 ellipsis 属性 了 。 


< 信 注意 : text-overflow 属性 仅 是 内 容 注 解 ， 表 明 当 文本 溢出 时 是 否 显示 省 略 标 记 ， 并 不 具备 样式 定 
义 的 特性 。 要 实现 溢出 时 产生 省 略 号 的 效果 ,还 应 定义 两 个 样式 : 强制 文本 在 一 行内 显示 

( white-space:nowrap ) 和 溢出 内 容 为 隐藏 (overflow:hidden ) ， 只 有 这 样 才能 实现 溢出 文 ， 

本 显示 省 略 号 的 效果 。 

【示例 】 下 面 示例 设计 新 闻 列 表 有 序 显 示 ， 对 于 超出 指定 宽度 的 新 闻 项 ， 则 使 用 text-overflow 属 

性 省 略 并 附加 省 略 号 ， 避 免 新 闻 换 行 或 者 撑 开 版 块 ， 演 示 效 果 如 图 4.1 所 示 。 


= 一 中 -| 碟 http://localho... v 电 也 忆 localhost 
唐诗 名 句 靖 选 


留 | 海内 存 知 己 ， 无 压 芳 比邻 。 惠 - 王 封 立 送 杜 少 府 之 


条 不 知 细 叶 崔 裁 出 ， 二 月 春风 世 刘 刃 。 唐 贺 知 章 如 …: 
委 欲 育 千里 下 ， 更 上 一 层 楼 。 惠 - 王 之 澳 登 钢 作 楼 和 
9 野 上 及 天 你 树 ， 江 青 月 近 人 。 惠 -去 洪 然 避 祝 召 德 工 》 
季 大 莫 阮 烟 直 ， 上 长 河 落日 国 。 志 王 维 必 使 至 塞 上 光 


图 4.1 设计 固定 宽度 的 新 闻 栏 目 
示例 代码 如 下 : 


<style type="text/css"> 

dl {* 定 义 新 闻 栏 目 外 框 ， 设 置 固 定 宽 度 */ 
width:300px:; 
border:solid 1px #cee:; 


} 

dt { 放 设 计 新 闻 栏 目标 题 行 样式 */ 
padding:8px 8px: 谍 增 加 文本 周围 空隙 */ 
margin-bottom: 12px:; 谍 调 整 底部 间距 */ 
background:#7FECAD url(images/green.gif) repeat-x; /设计 标题 栏 背景 图 q/ 
诺 定 义 字 体 样式 */ 
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font-slze:13px: font-welghtbold: color:#71790C: 
text-align:left: 启 恢 复 文 本 默认 左 对 齐 */ 
border-bottom:solid 1px #efefef: 诺 定 义 浅 色 边框 线 */ 


| } 
Ey | dd {* 设 新 闻 列 表 项 样式 */ 
| font-slze:0.78em: 

谍 固 定 每 个 列表 项 的 大 小 */ 

height: 1.Sem:;width:280px; 
谍 为 添加 新 闻 项 目 符号 腾 出 空间 */ 
padding:2px 2px 2px 18px; 
上 # 以 背景 方式 添加 项 目 符号 名 
background: url(i1mages/icon.gif) no-Tepeat 6px 25%: 
margin:2px 0; 
/# 为 应 用 text-overflow 做 准备 ， 禁 止 换 行 */ 
white-space: nowrap; 
诺 为 应 用 text-overflow 做 准备 ， 禁 止 文本 洲 出 显示 */ 


overflow: hidden: 
-0-text-overflow: ellipsis; 旋 兼 容 Opera*/ 
text-overflow: ellipsis; 访 兼 容 正 ，Safari (WebKit)*/ 
-moz-binding: url(images/ellipsis.xml#ellipsis"): 访 兼 容 Firefox*/ 

} 

</style> 

<dl> 
<dt> 唐 诗 名 句 精 选 </dt> 


<dd> 海 内 存 知己 ， 天 涯 若 比 邻 。 唐 。 王 勃 《 送 杜 少 府 之 任 蜀 州 》 </dd> 
<dd> 不 知 细 叶 谁 裁 出 ， 二 月 春风 似 前 刀 。 唐 。 贺 知 章 《 咏 柳 》 </dd> 
<dd> 谷 穷 千里 目 ， 更 上 一 层 楼 。 唐 。 干 之 澳 《 登 驮 省 楼 》 </dd> 
<dd> 野 旷 天 低 树 ， 江 清 月 近 人 。 唐 。 雷 浩然 《 宿 建 德江 》 </dd> 
<dd> 大 漠 扳 烟 直 ， 长 河 落日 圆 。 唐 。 王 维 《 使 至 塞 上 》 </dd> 

</dl> 


4.1.3 文本 换行 
| 在 CSS3 中 ， 使 用 word-break 属性 可 以 定义 文本 自动 换行 。 基 本 语法 如 下 : 
word-break: normal | keep-all | break-all 
取 值 简单 说 明 如 下 。 
四。 normal: 为 默认 值 ， 依 照 亚 洲 语言 和 非 亚洲 语言 的 文本 规则 ， 人 允许 在 字 内 换行 。 
加 ”keep-all: 对 于 中 文 、 韩 文 、 日 文 不 允许 字 断 开 。 适 合 包含 少量 亚洲 文本 的 非 亚洲 文本 。 
break-all: 与 normal 相同 ， 人 允许 非 亚 洲 语 言 文本 行 的 任意 字 内 断 开 。 该 值 适 合 包含 一 些 非 亚 
洲 文本 的 亚洲 文本 ， 如 使 连续 的 英文 字母 间断 行 。 
会 提示 : word-break 原来 是 IE 私有 属性 ， 在 CSS3 中 被 Text 模块 采用 ,得 到 Chrome 和 Safari 等 浏 
览 器 的 支持 ， 但 不 支持 keep-all 取 值 。 
男 外 ，IE 自 定 义 了 多 个 换行 处 理 属性 : line-break、word-break、word-wrap，CSS1 也 定义 了 


”white-space。 这 几 个 属性 简单 比较 如 下 。 
| 回 line-break: 指定 如 何 (或 是 否 ) 断 行 。 除 了 Firefox， 其 他 浏览 器 都 支持 。 取 值 说 明 如 下 所 示 。 


。 /0。 
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auto: 使 用 默认 的 断 行 规则 分 解 文本 。 

loose: 使 用 最 松散 的 断 行 规则 分 解 文 本 ， 一 般 用 于 短 行 的 情况 ， 如 报纸 。 
normal: 使 用 最 一 般 的 断 行规 则 分 解 文 本 。 

strict: 使 用 最 严格 的 断 行 原则 分 解 文本 。 


word-wrap: 人 允许 长 单词 或 URL 地 址 换行 到 下 一 行 。 所 有 浏览 器 都 文 持 。 取 值 说 明 如 下 。 


万 
> 


normal: 只 在 允许 的 断 字 点 换行 (浏览 器 保持 默认 处 理 ) 。 
break-word: 在 长 单词 或 URL 地 址 内 部 进行 换行 。 


word-break: 指定 怎样 在 单词 内 断 行 。 取 值 说 明 参 考 上 面 语 法 。 
white-space: 设置 如 何 处 理 元 素 中 的 空格 ， 所 有 浏览 器 都 文 持 。 取 值 说明 如 下 。 


> 
> 


> 
> 


> 


【拓展 】 | 
在 IE 浏览 器 下 ， 使 用 “word-wrap:break-word;” 声 明 可 以 确保 所 有 文本 正常 显示 。 在 Firefox 浏 | 
览 器 下 ， 中 文 不 会 出 现任 何 问题 ， 英 文 语 句 也 不 会 出 现 问 题 。 但 是 ， 长 串 英 文 会 出 现 问题 。 为 了 解决 ， 


normal: 默认 处 理 方式 。 


pre: 使 用 等 宽 字 体 显 示 预 先 格式 化 的 文本 ， 不 合并 文字 间 的 空白 距离 ， 当 文字 超出 边 ， 


界 时 不 换行 。 
nowrap: 强制 在 同一 行内 显示 所 有 文本 ， 合 并 文本 间 的 多 余 空 日 。 


pre-wrap: 使 用 等 宽 字体 显示 预先 格式 化 的 文本 ， 不 合并 文字 间 的 空白 距离 ， 当 文字 碰 


到 边界 时 发 生 换 行 。 
pre-line: 保持 文本 换行 ， 不 保留 文字 间 的 空白 距离 ， 当 文字 碰 到 边界 时 发 生 换 行 。 


长 串 英 文 问题 ， 一 般 将 “word-wrap:break-word;” 和 “word-break:break-all; ”声明 结合 使 用 。 但 是 ， 
这 种 方法 会 导致 普通 英文 语句 中 的 单词 被 断 开 显示 〈IE 下 也 是 )。 
为 了 解决 这 个 问题 ， 可 使 用 “word-wrap:break-word:overflow:hidden; ”>， 而 不 是 “word-wrap:break- 
word:;word-break:break-all;:”。“word-wrap:break-word:;overflow:auto; ”在 正 下 没有 任何 问题 ， 但 是 在 
Firefox 下 ， 长 串 英 文 单词 就 会 被 遮 住 部 分 内 容 。 
【示例 】 下 面 示例 在 页 面 中 插入 一 个 表格 ， 由 于 标题 行文 字 较 多 ， 标 题 行 党 被 撑 开 ， 影 响 了 浏览 | 
体验 。 为 了 解决 这 个 问题 ， 借 助 CSS 换行 属性 进行 处 理 ， 比 较 效果 如 图 4.2 所 示 。 


<style type="text/css"> 
et 
width: 100%: 
font-size: 14px:; 
border-collapse: collapse: 瞩 定 义 细 线 表格 */ 
border: 1px solid #cad9ea; 诺 添 加 淡色 细 线 边框 */ 
table-layout: fixed: 谍 定 义 表 格 在 浏览 器 端 逐 步 解析 呈现 ， 避 免 破坏 布局 */ 
} 
也 《1 
background-image: url(images/th bgl.gifj; ”/* 使 用 背景 图 模拟 渐变 背景 */ 
background-repeat: repeat-x; 诺 定 义 背 景 图 平 铺 方 式 */ 
height: 30px; 
vertical-align:middle: 上 旋 垂 直 居 中 显示 */ 
border: 1px solid #cad9ea:; 诺 添 加 淡色 细 线 边框 */ 
padding: 0 lem 0; 
overflow: hidden: /# 超 出 范围 隐藏 显示 ， 避 免 撑 开 单元 格 沁 
word-break: keep-all: /* 禁 止 词 断 开 显示 所 
white-space: nowrap: 诺 强 迫 在 一 行内 显示 */ 
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} 
td { 
height: 20px: 
border: 1px solid #cad9ea; 上 谍 添 加 淡色 细 线 边框 */ 
padding: 6px lem: /# 增 加 单元 格 空 除 ， 避 免 文 本 挤 在 一 起 癌 


} 
‘Note tr:nth-child(even) {background-color: #f5fafe:; } 


-W4 {width: 4em: } 
</style> 
<table> 
<tr> 
<th class="w4"> 与 文本 换行 相关 的 属性 </th> <th> 使 用 说 明 </th> 
</tr> 
<tr> 
<td>line-break</td><td>...</td> 
</tr> 
<tr> 
<td>word-wrap</td> <td>...</td> 
</tr> 
<fr> 
<td>word-break</td><td>...</td> 
</tr> 
<tr> 
<td>white-space</td><td>...</td> 
</tr> 
</table> 


x 


| © @ hr/hocattost os0 ms ~ Bo 人 
使 用 涪 明 


妆 定 如 何 《或 是 否 》 断 行 。 院 JFirefes， 其 他 浏览 强 都 专 持 。 取 值 和 括 ; 
2 使 用 缺 涯 的 煌 行规 刚 分 解 文本 
lo0se， 他 用 呈 松 委 的 析 行 夫 册 分 前 文本 ， 一 般 用 于 后 行 的 情况 ， 如 报纸 ; 
normmal， 使 用 虽 一 般 交 击 F 了 起 刚 分 解 紊 本 
strict， 他 用 最 严格 的 断 行 席 风 分解 文本 。 


x 
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用 于 指定 如 何 《或 星 否 》 断 行 。 i 其 他 浏览 器 都 支持 。 职 值 和 包括: 

auto， 仙 用 者 洗 的 上 电 行 规则 分 冲 文本 

loosc， 使 用 时 松 族 的 晰 行规 刚 耸 解 文本 ， 一 般 用 于 短 行 的 情 郧 ， 如 报纸 ; 
段 人 f 革 [行规 则 分 解 文本 


于 


normal， 人 使 用 民 一 

strict， 使 用 最 严格 的 断 行 原由 盼 解 文本 。 
允许 长 单词 或 URIL 地 址 换行 到 下 一 行 。 所 有 浏览 器 孝 支 持 。 职 信和 括 : 
normal, 许 咎 苦 f 字 点 换行 《 浊 鉴 窜 保 持 墅 认 隶 理 》， 
break-word， 在 长 意 词 虽 DRL 地 址 内 部 进行 换行 。 


定义 文本 自动 换行 。Chrome 和 safari 浏览 器 支持 不够 友好 。 取 信和 包括 : 
nofrmal， 为 有 下 换行 


许字 新 开 ; 
break-all， 与 aormal 相 辣 ， 元 谋 非 亚 外 局 计 言 训 本 行 的 任意 字 上 大 Ef 开 。 
设置 如 { 人 所 有 浏览 絮 部 支持 。 职 值 包 括 : 


pre， 是 本 性 认 本 ， 当 文 字 超出 边界 时 趟 换行 ; 
寓 | 在 同一 行内 显示 所 有 六 本 ,合并 文本 间 的 多 余 空白 , 直到 文本 结束 或 


遭遇 br 对 等 
王 yrs 显示 预先 祝 式 必 的 六 本， 不 合并 文字 间 的 守明 距 高 ， 当 文字 夸 到 边 罚 时 
于 介 持 文本 的 换行 ， 予 蓉 留 文字 间 的 衬 有 中 高 ， 当 文子 三 到 边界 时 发 生 的 
本 


刘 许 长 单词 或 URL 地 址 执行 妇 | 下 一 行 。 所 有 浏览 器 都 支持 。 取 和 仁 自 括 : 
normal， 只 在 多 许 凶 靳 字 点 换行 “浏览 器 保持 财 认 处 理 》; 
break-word， 在 长 单 证 三 URL 地 址 向 部 进行 换行 。 


定义 文本 自动 换行 。 er 取信 息 括 : 
normal， 为 中 认 值 ， 人 允许 芷 字 内 换行 : 


内 换 
keep-all. 对 于 中 文 、 韩 文 、 Ex 不 多 许字 新 并 ; 
bteak-all，Saofmal 相 辣 ， 双 许 非 亚 尖 语言 文本 行 的 任意 字 庆 白 开 ， 


设置 如 何 处 理 元 幸 中 的 空格 。 所 有 浏览 器 都 支持 。 职 值 包 括 : 
Dofmal， 有 村 人 处 理 方式 
pre， 显 示 预 先 格式 性 的 六 本 ， 当 文字 超出 边界 时 不 换行 ; 


nowrap, 训 测 在 同行 [3 旺 村 所 有 文本 ， 合并 文本 间 的 多 余 空白 ， 直 利文 本 结束 或 


者 道 语 br 对 多 


pre-rvrap ， 显示 预先 将 式 化 的 本 ， 不 合并 文字 间 的 空白 距离 ， 当 文字 三 到 边 罚 时 


换行 
ei 保持 立 本 的 迫 行 ， 不 尿 留 文字 则 的 空白 中 高 ， 当 交 字 碰 到 边界 时 尾 生 换 
本 es 


处 理 后 


图 4.2 茶 止 表格 标题 文本 换行 显示 


4.1.4 书写 模式 


CSS3 增强 了 文本 布局 中 的 书写 模式 ， 在 CSS2.1 定义 的 direction 和 unicode-bidi 属性 基础 上 ， 新 


增 writing-mode 属性 。 基 本 语法 如 下 : 


writing-mode: horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl 


了 
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取 值 简单 说 明 如 下 。 
horizontal-tb: 水 平方 同 自 上 而 下 的 书写 方式 ， 类 似 正 私有 值 1r-tb。 
vertical-rl: 王 直 方 同上 自 右 而 左 的 书写 方式 ， 类 似 I 正 私有 值 tb-rl1。 
vertical-lr: 琴 直 方 同 目 左 而 右 的 书写 方式 。 入 
lt-tb: 左 - 右 ， 上- 下。 对 象 中 的 内 容 在 水 平方 旬 上 从 左 同 右 流入 ,后 一 行 在 前 一 行 的 下 面 显示 。 ”全 一 
tb-rl: 上 -下 ， 右 - 左 。 对 象 中 的 内 容 在 垂直 方向 上 从 上 癌 下 流入 ， 自 右 同 左 。 后 一 TI Note 
竖 行 的 左面 。 全 和 角 字 符 是 竖 直 同上 的 ， 半 角 字 符 〈 如 拉丁 字母 或 片 假名 ) 尖 
顺 时 针 旋 转 90”。 
权威 参考 : http://www.w3.org/TR/CSS-writing-modes-3/。 
【拓展 】 
direction 设置 文本 流 方 同 ， 取 值 包括 : ltr， 文 本 流 从 左 到 右 ; ttl， 文 本 流 从 右 到 左 。unicode-bidi ， 
用 于 在 同一 个 页 面 里 定义 从 不 同 显示 方 癌 的 文本 ， 与 direction 属性 一 起 使 用 。 
【示例 1】 下 面 示例 设计 唐诗 从 右 侧 流入 ， 自 上 而 下 显示 ， 效 果 如 图 4.3 所 示 。 
<style type="text/css"> 
#box { 
float: right: 
writing-mode: tb-rl; 
-webkit-writing-mode: vertical-rl; 
writing-mode: vertical-Tl: 
} 
</style> 
<div 1d="box"> 
<h2> 春 晓 </h2> 
<p> 春 眠 不 觉 晓 ， 处 处 闻 啼 乌 。 夜 来 风雨 声 ， 花 落 知 多 少 。</p> 
</div> 


【示例 2】 配 合 margin-top: auto 和 margin-bottom: auto 声明 ， 设 计 栏 目 垂直 居中 效果 ， 如 图 4.4 


办 的 


所 示 。 

<style type="text/css"> 

-box { 
width: 400px: height: 300px:; 
background-color: #f0f3f9}; 
writing-mode: tb-Tl: 
-webkit-writing-mode: vertical-Tl; 
writing-mode: vertical-1l:; 

} 

.auto { 
margin-top: auto: /# 垂 直 届 中 所 
margin-bottom: auto: /* 垂 直 居 中 所 
height: 120pxX: 


} 
Img {height:120px:} 
</style> 


<div class="box"> 
<div class="auto"><img src="1mages/bg.png"></div> 
</div> 


se。 /3。 


其 
| (+) | http;//localho... - 昌 纺 ‖ 龟 iocalhost X 


2 


花 春 
二 
i 
` 恬 


.二 医 闪 对 . 具 史 丁 祈 访 


| 图 4.3 ”设计 唐诗 传统 书写 方式 图 44， 设 计 垂直 居中 布局 


【示例 3】 下 面 示例 设计 一 个 象棋 棋子 ， 然 后 定义 当 超 链 接 被 激活 时 ， 首 行文 本 缩 进 4px， 由 于 
”使 用 了 策 直 书写 模式 ， 则 文本 向 下 移动 4px， 就 可 以 模拟 一 种 动态 下 沉 效果 ， 如 图 4.5 所 示 。 


<style type="text/css"> 

| -btn { 

width: 80px: height: 80px:; 访 固 定 大 小 */ 

line-height: 80px: 诺 慌 直 居 中 */ 

| font-size: 62px: 率 大 字体 */ 

| cursor: pointer: /# 手 形 指针 样式 要 

text-align: center: 谍 文 本 居中 显示 */ 

| text-decoration:none: /# 清 除 下 男 线 #/ 

color: #a78252; 此 字体 颜色 */ 

background-color: #ddc390: /# 增 加 背景 色 #/ 
border: 6px solid #ddc390; /# 增 加 粗 边框 #/ 
border-radius: 50%%: 此 定义 圆 形 显示 */ 


诺 定 义 阴 影 和 内 阴影 边线 */ 

box-shadow: inset 0 0 0 lpx #d6b681, 0 1px, 0 2px, 0 3px, 0 4px; 
writing-mode: tb-rl; 

-webkit-writing-mode: vertical-rl; 

] writing-mode: vertlcal-Tl: 

| } 

| .btn:active {text-indent: 4px;} 

</style> 


<a href='#" class="btn"> 将 </a> 


x 
[| > 中- 硬 hitp://localhe... - [4 节 磺 Iocalhost 


图 4.5 设计 动态 下 沉 特 效 


恒 %  4.1.5 initial 值 
| inmitial 表示 初始 化 属性 的 值 ， 所 有 的 属性 都 可 以 接受 该 值 。 如 果 想 重 置 某 个 属性 为 浏览 器 默认 设 


。74 。 
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置 ， 那 么 就 可 以 使 用 该 值 ， 这 样 就 可 以 取消 用 户 定义 的 CSS 样式 。 
< 入 注意 : IE 暂 不 支持 该 属性 值 。 


【示例 】 在 下 面 示例 中 ， 页 面 中 插入 了 4 段 文本 ,然后 在 内 部 样式 表 中 定义 这 4 段 文本 蓝 色 、 加 ， a 
粗 显 示 ， 字 体 大 小 为 24px， 显 示 效果 如 图 4.6 所 示 。 国 _ 


<style type="text/css"> 


pi 
color: blue; 
font-size:24px; 
font-weight:bold; 
} 
</style> 
<p> 春 眠 不 觉 晓 ，</p> 
<p> 处 处 闻 啼 乌 。</p> 
<p> 夜 来 风雨 声 ，</p> 
<p> 花 落 知 多 少 。</p> 


如 果 想 禁止 第 1 句 和 第 3 句 使 用 用 户 定 义 的 样式 ， 只 需 在 内 部 样式 表 中 添加 一 个 独立 样式 , 然后 
把 文本 样式 的 值 都 设 为 initial 值 即 可 。 具 体 代 码 如 下 所 示 ， 运 行 结果 如 图 4.7 所 示 。 


p:nth-child(odd){ | 


口 localhost:s0: x WN 
C | @ localhost8080/ 安 | ; 


color: initial: | 
font-slze:Inltial: | 
font-weight:initial: 
, | 


C | @ localhost8080/ 食  ; 


春 眠 不 觉 晓 ， 春 眼 不 蕊 晓 ， 
处 处 闻 啼 鸟 。 处 处 闻 啼 乌 。 
夜来 风雨 声 ， 
夜来 风雨 声 ， 
人 花 落 知 多 少 。 
花 落 知 多 少 。 
图 4.6 定义 段落 文本 样式 图 4.7 恢复 段落 文本 样式 | 
在 浏览 器 中 可 以 看 到 ， 第 1 句 和 第 3 句 文本 恢复 为 默认 的 黑色 、 常 规 字体 ， 大 小 为 16px。 pm 
4.1.6 inherit 值 人 


inherit 表示 属性 能 够 继承 祖先 的 设置 值 ， 所 有 的 属性 都 可 以 接受 该 值 。 
【示例 】 下 面 示例 设置 一 个 包含 杠 ， 高 度 为 200px， 包 含 两 个 合子， 定义 盒子 高 度 分 别 为 100% 
和 inherit， 正 第 情况 下 都 会 显示 200px， 但 是 在 特定 情况 下 ， 例 如 定义 盒子 绝对 定位 显示 ， 则 设置 
“height:inherit ”能 够 按 预 期 效果 显示 ， 而 “height:1009%6;: ”就 可 能 撑 开 包含 枉 ， 效 果 如 图 4.8 所 示 。 
<style type="text/css"> 
.box { | 
display: Inline-block': L 
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height: 200px: 
width: 45%: 
border: 2px solid #666; 


} 
.box div{ 
width: 200px:; 
background-color: #ccece:; 
position: absolute; 
} 
.height] {height: 100%:} 
.height2 {height: nherit;} 
</style> 
<div class="box"> 
<div class="heightl">height: 100%:</div> 
</div> 
<div class="box"> 
<div class="height2">height: 1nhenit;</div> 
</div> 


图 4.8 比较 inherit 和 100% 高 度 效果 


【补充 】 
inherit 表示 继承 属性 值 ， 一般 用 于 字体 、 颜 色 、 背 景 等 ;auto 表示 上 自 适 应 ,一般 用 于 高 度 、 宽 度 、 
外 边 距 和 内 边 距 等 关于 长 度 的 属性 。 


4.1.7 unset 值 


unset 表示 擦 除 用 户 声 明 的 属性 值 ， 所 有 的 属性 都 可 以 接受 该 值 。 如 果 属 性 有 继承 的 值 ， 则 该 属 
性 的 值 等 同 于 inherit， 即 继承 的 值 不 被 擦 除 ; 如 果 属 性 没有 继承 的 值 ， 则 该 属性 的 值 等 同 于 initial， 
即 擦 除 用 户 声 明 的 值 ， 恢 复 初 始 值 。 
< 注意 : IE 和 Safari 暂时 不 支持 该 属性 值 。 


【示例 】 下 面 示例 设计 4 段 文本 ， 第 1 段 和 第 2 段位 于 <div class="box"> 容 器 中 ， 设 置 段落 文本 
显示 为 30px 的 蓝 色 字 体 ， 现 在 擦 除 第 2 段 和 第 4 段 文本 样式 ， 则 第 2 段 文本 显示 继承 样式 ， 即 12px 
的 红色 字体 ， 而 第 4 段 文本 显示 初始 化 样式 ， 即 16px 的 黑色 字体 ， 效 果 如 图 4.9 所 示 。 


<style type="text/css"> 
.box {color: red; font-size: 12px;} 
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p {color: blue:; font-size: 30px;:} 
p-unset { 
color: unset' 
font-size: unset: 
</style> 
<div class="box"> 
<p> 春 眠 不 党 晓 ，</p> 
<p class="unset"> 处 处 闻 啼 鸟 。</p> 
</div> 
<p> 夜 来 风雨 声 ，</p> 
<p class="unset"> 花 落 知 多 少 。</p> 


DD localhost8080/mysitc | x Wn 


GC | © localhost:8080/mysite/test.html 六 | : 


春 眠 不 党 晓 ， 


处 处 闻 培 乌 。 


花 落 知 多 少 。 


图 4.9 ”比较 擦 除 后 文本 效果 


4.1.8 all 属 性 
all 属性 表示 CSS 的 所 有 属性 ， 但 不 包括 unicode-bidi 和 direction 这 两 个 CSS 属性 。 
< 人 注意 : IE 暂时 不 支持 该 属性 。 
【示例 】 针 对 4.1.7 节 示 例 ， 我 们 可 以 简化 p.unset 类 样式 。 


p-.unset { 
all: unset: 
} 


如 果 在 样式 中 声明 的 属性 非常 多 ， 使 用 all 会 极为 方便 ， 可 以 避免 逐个 设置 每 个 属性 。 
42 色彩 模式 


CSS2 .1 支持 Color Name (颜色 名 称 )、HEX (十 六 进 制 颜色 值 )、RGB，CSS3 新 增 3 De 
RGBA、HSL 和 HSLA， 下 面 分 别 进 行 介绍 。 
权威 参考 : http://www.w3.org/TR/css3-color/。 


4.2.1 rgba() 函 数 


权威 参考 可 频 讲台 
RGBA 是 RGB 色彩 模式 的 扩展 ， 它 在 红 、 绿 、 蓝 三 原色 通道 基础 上 增加 了 Alpha 通道 。 其 语法 


。//* 
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”格式 如 下 : 
rgbal(r,g,b,<opacity>) 


参数 说 明 如 下 。 
回 r、g、b: 分 别 表示 红色 、 绿 色 、 赣 色 三 原色 所 占 的 比重 。 取 值 为 正 整 数 或 者 百分数 。 正 整 


数值 的 取 值 范围 为 0 一 235， 百 分 数值 的 取 值 范围 为 0.0% 一 100.0%。 超 出 范围 的 数值 将 被 截 


至 其 最 接近 的 取 值 极限 。 注 意 ， 并 非 所 有 浏览 器 都 支持 使 用 百分数 值 。 
<opacity>: 表示 不 透明 度 ， 取 值 范 围 为 0 一 1。 
【示例 】 下 面 示 例 使 用 CSS3 的 box-shadow 属性 和 rgba() 函 数 为 表单 控件 设置 半 透 明度 的 阴影 ， 
”来 模拟 柔和 的 润 边 效 果 。 示 例 主要 代码 如 下 ， 预 览 效 果 如 图 4.10 所 示 。 


<style type="text/css"> 
input, textarea {/* 统 一 文本 框 样式 */ 


padding: 4px: /# 增 加 内 补 白 ， 增 大 表单 对 象 尺寸 ， 看 起 来 更 大 方 #/ 
border: solid lpx #E5ESES: 谍 增 加 淡淡 的 边框 线 */ 

outline: 0: 计 清 除 轮廓 线 */ 

font: normal 13px/100% Verdana, Tahoma, sans-serif: 

width: 200px: 诺 固 定 宽度 */ 

background: #F FFFFF: 启 白 色 背 景 */ 

诺 设 置 边框 阴影 效果 */ 


box-shadow: rgba(0, 0, 0, 0.1) Opx Opx 8px; 


} 
访 定 义 表 单 对 象 获取 焦点 、 鼠 标 经 过 时 ， 高 之 显示 边框 */ 
input:hover, textarea:hover Input:focus, textarea:focus {border-color: #C9C9C9;} 
label {/* 定 义 标 签 样式 */ 
margin-left: 10px: 
color: #999999; 
display:block; /* 以 块 状 显 示 ， 实 现 分 行 显示 */ 


} 
.submit input {/* 定 义 提 交 按 钮 样式 */ 


width:auto: 话 自 动 调整 宽度 */ 
padding: 9px 15px: 谍 增 大 按钮 尺寸 ， 看 起 来 更 大 气 */ 
background: #617798; /# 设 计 扁 平 化 单 色 背景 #/ 
border: 0: 话 清 除 边 框 线 */ 
font-size: 14px: /# 固 定 字 体 大 小 #/ 
color: #FFFFFF: 上 诺 白 色 字 体 */ 
} 
</style> 
<form> 


<p class="name"> 

<label for="name"> 姓 名 </label> 

<input type="text" name="name" 1d="name" /> 
</p> 
<p class="email"> 

<label for="email"> 邮 箱 </label> 

<Inpnut type="text" name="email" 1d="email" /> 
</p> 
<p class="submit"> 


<input type="submit" value=" 提 交 " /> 
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</p> 
</form> | 
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图 4.10 设计 和 带 有 阴影 边框 的 表单 效果 


全 提示 : rgba(0,0,0,0.1) 表 示 不 透明 度 为 0.1 的 黑色 ， 这 里 不 宜 直 接 设置 为 浅 灰 色 ， 因 为 对 于 非 白 色 ， 
背 录 来 说 ， 灰 色 发 上 庶 ， 而 半 透 明 效 果 可 以 避免 这 种 情况 。 


4.2.2 hsl() 函 数 


HSL 是 一 种 标准 的 色彩 模式 , 包括 了 人 类 视力 所 能 感知 的 所 有 颜色 , 在 屏幕 上 可 以 重 现 16777216 
种 颜色 ， 是 目前 运用 最 广泛 的 颜色 系统 。 它 通过 色调 (H)、 饱 和 度 〈S) 和 亮度 (L) 3 个 颜色 通道 的 
登 加 来 获取 各 种 颜色 。 其 语法 格式 如 下 : 
hsl(<length>,<percentage>,<percentage>) 
参数 说 明 如 下 。 
<length>: 表示 色调 (Hue) 。 可 以 为 任意 数值 , 用 以 确定 不 同 的 颜色 。 其 中 0 (或 360、-360) 
表示 红色 ，60 表示 黄色 ，120 表示 绿色 ，180 表示 青色 ，240 表示 蓝 色 ，300 表示 洋红 。 
<percentage> (第 一 个 ) : 表示 饱和 度 〈Saturation) ， 取 值 范 围 为 0 一 100%。 其 中 0% 表 示 
灰 度 ， 即 没有 使 用 该 颜色 ;100% 饱 和 度 最 高 ， 即 颜色 最 艳 。 ] 
<percentage>( 第 二 个 ) : 表示 亮度 (Lightness) ， 取 值 范围 为 0 一 100%。 其 中 0% 最 瞳 ， 显 
示 为 黑色 ; 50% 表 示 均 值 ，100% 最 亮 ， 显 示 为 白色 。 | 
【示例 】 设 计 颜 色 表 。 先 选择 一 个 色 值 ， 然 后 通过 调整 颜色 的 饱和 度 和 亮度 比重 ， 分 别 设计 不 同 
的 配色 方案 表 。 在 网 页 设计 中 ， 利 用 这 种 方法 可 以 根据 网 页 需要 选择 恰当 的 配色 方案 。 使 用 HSL 颜 
色 表 现 方式 ， 可 以 很 轻松 地 设计 网 页 配色 方案 表 ， 模 拟 演示 效果 如 图 4.11 所 示 。 
<styletype="text/css"> 
此 设计 表格 边框 样式 并 增加 内 部 间距 ， 以 方便 观看 */ 
table {border: solid 1px red: background:#eee:; padding:6px;:} 
谍 设 计 列 标题 字体 样式 */ 
th{color:red; font-slze:12px: font-weight:normal:} 
诺 设 计 单 元 格 大 小 尺寸 */ 
tdfwldth:80px: height:30px;} 
* 第 1 行 */ | 
tr:nth-child(4) td:nth-of-type(1){background:hsl(0,100%,100%):;M/* 第 1 列 */ | 
tr:nth-child(4) td:nth-of-type(2) {background:hsl(0,75%,100%):;Y/* 第 2 列 */ 
tr:nth-child(4) td:nth-of-type(3){background:hsl(0,50%,100%):;Y/* 第 3 列 */ | 
tr:nth-child(4) td:nth-of-type(4) {background:hs1(0,25%,100%):;}/* 第 4 列 */ 
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tr:nth-child(4) td:nth-of-type(5) {background:hsl(0,0%,100%):;}/* 第 5 列 */ 
/# 第 2 行 */ 

tr:nth-child($) td:nth-of-type(1){background:hsl(0,100%,88%):;}/* 第 1 列 */ 
tr:nth-child($) td:nth-of-type(2) {background:hsl(0,75%,88%):;}/* 第 2 列 */ 
皇 tr:nth-child(5) td:nth-of-type(3) {background:hsl(0,50%,88%):}/* 第 3 列 */ 
We tr:nth-child(5) td:nth-of-type(4) {background:hsl(0,25%,88%):;}/* 第 4 列 */ 
Note tr:nth-child(5) td:nth-of-type(S$){background:hsl(0,0%,88%):;}/* 第 5 列 */ 

| /第 3 行 */ 

tr:nth-child(6) td:nth-of-type(1){background:hsl(0,100%%,75%):;}/* 第 1 列 */ 
tr:nth-child(6) td:nth-of-type(2) {background:hsl(0,75%,75%):;}/* 第 2 列 */ 
tr:nth-child(6) td:nth-of-type(3){background:hsl(0,50%,75%):}/* 第 3 列 */ 
tr:nth-child(6) td:nth-of-type(4) {background:hsl(0,25%,75%):;}/* 第 4 列 */ 
tr:nth-child(6) td:nth-of-type($){background:hsl(0,0%,75%):;Y/* 第 5 列 */ 
/# 第 4 行 */ 

tr:nth-child(7) td:nth-of-type(1){background:hsl(0,100%,63%):;Y/* 第 1 列 */ 
tr:nth-child(7) td:nth-of-type(2) {background:hsl(0,75%,63%):;}/* 第 2 列 */ 
tr:nth-child(7) td:nth-of-type(3){background:hsl(0,50%,63%):;}/* 第 3 列 */ 
tr:nth-child(7) td:nth-of-type(4) {background:hsl(0,25%,63%):;}/* 第 4 列 */ 
tr:nth-child(7) td:nth-of-type(S$) {background:hsl(0,0%,63%);}/* 第 5 列 */ 
启 第 5 行 */ 

tr:nth-child(8) td:nth-of-type(1){background:hsl(0,100%,50%):;}/* 第 1 列 */ 
tr:nth-child(8) td:nth-of-type(2) {background:hsl(0,75%,50%):;}/* 第 2 列 */ 
tr:nth-child(8) td:nth-of-type(3) {background:hsl(0,50%,50%):;}/* 第 3 列 */ 
tr:nth-child(8) td:nth-of-type(4){background:hs1(0,25%,50%):}/* 第 4 列 */ 
tr:nth-child(8) td:nth-of-type($){background:hsl(0,0%,50%):;Y/* 第 5 列 */ 
/# 第 6 行 #/ 

tr:nth-child(9) td:nth-of-type(1){background:hsl(0,100%,38%):}/* 第 1 列 */ 
tr:nth-child(9) td:nth-of-type(2) {background:hsl(0,75%,38%):;}/* 第 2 列 */ 
tr:nth-child(9) td:nth-of-type(3) {background:hsl(0,50%,38%):;}/* 第 3 列 */ 
tr:nth-child(9) td:nth-of-type(4) {background:hsl(0,25%,38%):;}/* 第 4 列 */ 
tr:nth-child(9) td:nth-of-type($){background:hsl(0,0%,38%):;Y/* 第 5 列 */ 
/# 第 7 行 */ 

tr:nth-child(10) td:nth-of-type(1){background:hsl(0,100%%,25%):Y/* 第 1 列 */ 
tr:nth-child(10) td:nth-of-type(2) {background:hsl(0,75%,25%):}/* 第 2 列 |*/ 
tr:nth-child(10) td:nth-of-type(3){background:hsl(0,50%,25%):;}/* 第 3 列 */ 
tr:nth-child(10) td:nth-of-type(4) {background:hsl(0,25%,25%):;}/* 第 4 列 */ 
tr:nth-child(10) td:nth-of-type(S5){background:hsl(0,0%,25%):}/* 第 5 列 */ 
/# 第 8 行 */ 

tr:nth-child(11) td:nth-of-type(1){background:hsl(0,100%,13%);Y/* 第 1 列 */ 
tr:nth-child(11) td:nth-of-type(2){background:hs1(0,75%,13%):}/* 第 2 列 */ 
tr:nth-child(11) td:nth-of-type(3){background:hsl(0,50%,13%):}/* 第 3 列 */ 
tr:nth-child(11) td:nth-of-type(4){background:hs1(0,25%,13%):;}/* 第 4 列 */ 
tr:nth-child(11) td:nth-of-type(5$){background:hs1(0,0%,13%):;}/* 第 5 列 */ 
让 第 9 行 */ 

tr:nth-child(12) td:nth-of-type(1){background:hsl(0,100%,0%):;Y/* 第 1 列 */ 
tr:nth-child(12) td:nth-of-type(2){background:hsl(0,75%,0%):}/* 第 2 列 */ 
tr:nth-child(12) td:nth-of-type(3){background:hsl(0,50%,0%):;}/* 第 3 列 */ 
tr:nth-child(12) td:nth-of-type(4){background:hs1(0,25%,0%):}/* 第 4 列 */ 
tr:nth-child(12) td:nth-of-type(5){background:hsl(0,0%,0%):;Y/* 第 5 列 */ 
</style> 
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<table class="hslexample"> 
<tbody> 
< 
<th>&nbsp:</th><th colspan="S"> 色 相 : H=0 Red </t 了 h> 
</tr> 
<tr> 
<th>&nbsp:;</th><th colspan="S"> 饱 和 度 (&rarr;)</th> 
</tr> 
<tr> 
<th> 亮 度 (&darr;)</th> 
<th>100% </th><th>75% </th><th>50% </t 了 h><th>25% </t 了 h><th>0% 一 /由 > 
</tr> 
</tbody> 
</table> 


EB: H-0 Red 
户 和 度 (一 ) 
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图 4.11 使 用 HSL 颜色 值 设 计 颜 色 表 


在 上 面 代码 中 ，trnth-child(4) td:nth-of-type(1) 中 的 tr:nth-child(4) 子 选择 器 表示 选择 行 ， 而 td:nth- 
of-type(1) 表 示 选 择 单 元 格 ( 列 )。 其 他 行 选择 器 结构 依 此 类 推 。 在 “background:hsl(0,0%,0%);” 声 明 中 ，， 
hsl0 函 数 的 第 1 个 参数 值 0 表示 色相 值 ， 第 2 个 参数 值 0% 表 示 饱 和 度 ， 第 3 个 参数 值 0% 表 示 亮 度 。 


4.2.3 hsla() 函 数 


HSLA 是 HSL 色彩 模式 的 扩展 ， 在 色相 、 饱 和 度 、 亮 度 三 要 素 基 础 上 增加 了 不 透明 度 参数 。 使 
用 HSLA 色彩 模式 ， 可 以 定义 不 同 透 明 效 果 。 其 语法 格式 如 下 : 


hsla(<length>,<percentage>,<percentage>,<opacity>) 


其 中 前 3 个 参数 与 hs10 函 数 参 数 含义 和 用 法 相同 ， 第 4 个 参数 <opacity> 表 示 不 透明 度 ， 取 值 范 
围 为 0 一 1。 
【示例 】 下 面 示例 设计 一 个 简单 的 登录 表单 ， 表 单 对 象 的 边框 色 使 用 #fff 值 进行 设置 ， 定 义 为 白 
色 ; 表单 对 象 的 阴影 色 使 用 rgba(0,0,0,0.1) 值 进行 设置 ， 定 义 为 非常 透明 的 黑色 ; 字体 颜色 使 用 ， 
hsla(0,0%,1009%,0.9) 值 进行 设置 ， 定 义 为 轻微 透明 的 白色 。 预 览 效 果 如 图 4.12 所 示 。 


<style type="text/css"> 
body{/# 为 页 面 添加 背景 图 像 ， 显 示 在 中 央 顶 部 位 置 ， 并 列 完全 绑 盖 窗口 阁 
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background: #eedfcc url(1mages/bg.jpg) no-repeat center top:; 


background-slze: cover:; 


} 
.form {/* 定 义 表 单 框 的 样式 */ 
width: 300px: 
margin: 30px auto: 
border-radius: Spx; 
box-shadow: 0 0 Spx rgba(0,0,0,0.1), 
0 3px 2px rgba(0,0,0,0.1); 


} 
.formp {/* 定 义 表 单 对 象 外 框 圆 角 、 白 边 显 示 */ 
width: 100%: 
float: left: 
border-radius: Spx: 
border: 1px solid #ff{f: 


} 
访 定 义 表单 对 象 样式 */ 
.form nput[type=text], 
.form Input[type=password] { 
诺 固 定 宽度 和 大 小 */ 
width: 100%: 
height: SOpx: 
padding: 0; 
谍 增 加 修饰 样式 */ 
border: none: 
background: reba(255,255,255.,0.2); 
box-shadow: Inset 0 0 10px rgba(255,255,255,0.5); 
话 定 义 字 体 样式 */ 
text-indent: 10px; 
font-size: 16px; 
color:hsla(0,0%,100%,0.9); 
text-shadow: 0 -1px 1px rgba(0,0,0,0.4); 
} 
.form input[type=text| { 
border-bottom: 1px solid reba(255,255,255,0.7); 
border-radius: Spx Spx 0 0; 
} 
.form mput[type=password| { 
border-top: 1px solid rgba(0.,0,0,0.1):; 
border-radius: 0 0 Spx Spx:; 


} 

人 # 定 义 表 单 对 象 被 激活 或 者 鼠标 经 过 时 ， 

.form input[type=text|:hover, 

.form input[type=password|:hover, 

.form Input[type=text]:focus， 

.form Input[type=password]:focus { 
background: rgba(255,255,255,0.4); 
outline: none: 

} 

</style> 
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虑 固定 表单 框 的 宽度 */ 
诬 居 中 显示 */ 

谍 设 计 贺 角 效 果 */ 

谍 设 计 润 边 效果 */ 

诬 设 计 淡 淡 的 阴影 效果 */ 


/* 移 除 默 认 的 边框 样式 专 
上 谍 增 加 半 透 明 的 白色 背景 */ 
话 为 表单 对 象 设计 高 亮 效 果 */ 


谍 为 文本 添加 阴影 ， 设 计 立 体 效果 */ 
诬 设 计 用 户 名 文本 框 底部 边框 样式 , 并 设计 顶部 圆 角 */ 


谍 设 计 密 码 域 文本 框 项 部 边框 样式 , 并 设计 底部 图 角 */ 


宫 背 景色 ， 并 清除 轮廓 线 */ 


第 企 章 使 用 CSS3 设计 特 致 文 杰 


<form class="form"> 
<p> | 
<input type="text" id="login" name="login" placeholder=" 用 户 名 "> | 

<input type="password" name="password" id="password" placeholder=" 密 码 "> 


a 国会 A 


</form> 


人 人 由 -| 营 httpyjlocalho ~ & |‖ 感 Iocalhost 


图 4.12 设计 登录 表单 
4.2.4 opacity 属性 


opacity 属性 定义 元 素 对 象 的 不 透明 度 。 其 语法 格式 如 下 : 
opacity: <alphavalue> | Inherlt; 


取 值 简单 说 明 如 下 。 
<alphavalue>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 ， 默 认 值 为 1。opacity 
取 值 为 1 时， 元素 是 完全 不 透明 的 ; 取 值 为 0 时， 元 素 是 完全 透明 、 不 可 见 的 ; 介 于 1 到 0 
之 间 的 任何 值 都 表示 该 元 素 的 不 透明 程度 。 如 果 超 过 了 这 个 范围 ， 其 计算 结果 将 截取 到 与 之 
最 相近 的 值 。 
inherit: 表示 继承 父辈 元 素 的 不 透明 性 。 
【示例 】 下 面 示 例 设 计 <div class="bg"> 对 象 铺 满 整个 窗口 ， 显 示 为 黑色 背景 ， 不 透明 度 为 0.7， 
这 样 可 以 模拟 一 种 半 透 明 的 遮 淖 效果 ; 再 使 用 CSS 定位 属性 设计 <div class="login"> 对 象 显示 在 上 面 。 
示例 主要 代码 如 下 ， 演 示 效 末 如 图 4.13 所 示 。 


<style type="text/css"> 
body {margin: 0; padding: 0;} | 
div {position: absolute;} | 
-bg { | 
width: 100%: ] 
height: 100%;: 
background: #000; 
opacity: 0.7: 
filter: alpha(opacity=70):;} 
. login { 
text-align:center:; 
width:100%; | 
top: 20%; 
} 
</style> 
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CC 
Su 

<div class="web"><1imeg src="images/bg.png" /></div> 

<div class="bg"></div> 

<div class="login"><1mg sr 


1mages/login.pnge" /></div> 


图 4.13 设计 半 透 明 的 背景 布 效果 


| < 乓 注意 : 使 用 色彩 模式 函数 的 Alpha 通道 可 以 针对 元 素 的 背景 色 或 文字 颜色 单独 定义 不 透明 度 ， 而 
| opacity 属性 只 能 为 整个 对 象 定 义 不 透明 度 。 


和 4.2.5 transparent 值 


transparent 属性 值 用 来 指定 全 透明 色彩 ， 等 效 于 rgba(0,0,0,0) 值 。 
| 【示例 】 下 面 示例 使 用 CSS 的 border 设计 三 角形 效果 ， 通 过 transparent 颜色 值 让 部 分 边框 透明 
显示 。 代 码 如 下 所 示 ， 效 果 如 图 4.14 所 示 。 


<style type="text/css"> 

#demo { 
width: 0; height: 0: 
border-left: SOpx solid transparent: 
border-right: SOpx solid transparent: 
border-bottom: 100px solid red: 


} 
</style> 
<div 1d="demo"></div> 
通过 调整 各 边 颜 色 设 置 或 者 各 边 宽度 ， 可 以 设计 不 同 角度 的 三 角形 或 直角 等 不 同形 状 。 
(1) 设计 同 右 三 角形 
#demo { 
width: 0; height: 0: 
border-top: S0px solid transparent; 
border-left: 100px solid red: 
border-bottom: SOpx solid transparent; 
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(2) 设计 直角 三 角形 


#demo { 
width: 0: height: 0; 
border-top: 100px solid red: 
border-right: 100px solid transparent: 
} 


(3) 设计 梯形 (效果 如 图 4.15 所 示 ) 


#demo { 
height: 0; 
width: 120px: 
border-bottom: 120px solid #ec3504:; 
border-left: 60px solid transparent; 
border-right: 60px solid transparent: 


NE Ht)- http://ocalho.. ~ 0 


Ce +) | http://localho.. ~ BO 


图 4.14 设计 三 角形 效果 图 4.15 设计 梯形 效果 
4.2.6 ”currentColor 值 


在 CSS 中 ，border-color、box-shadow 和 text-decoration-color 属性 的 默认 值 是 color 属性 的 值 。 


【示例 1】 在 下 面 示例 中 ， 为 段落 文本 增加 边框 线 ， 边 框 线 的 颜色 为 “colorred; "， 显 示 为 红色 。 | 


<style type="text/css"> 


pi 
border:solid 2px: 
color:red: 
} 
</style> 
<p> 春 眠 不 觉 晓 ， 处 处 闻 啼 乌 。 夜 来 风雨 声 ， 花 落 知 多 少 。</p> 


在 CSS1 和 CSS2 中 ， 却 没有 为 此 定义 一 个 相应 的 关键 字 。 为 此 CSS3 扩展 了 颜色 值 ， 包 含 ， 


currentColor 关键 字 ， 并 用 于 所 有 接受 颜色 的 属性 上 。currentColor 表示 color 属性 的 值 。 


【示例 2】 在 下 面 示例 中 ,设计 图 标 背景 颜色 值 为 currentColor, 这 样 在 网 页 中 随 着 链接 文本 的 字 | 


体 颜 色 不 断 变化 ， 图 标的 颜色 也 跟随 链接 文本 的 颜色 变化 而 变化 ， 确 保 整 体 导 航 条 色彩 一 致 性 ， 达 到 
图 文 合 一 的 境界 ， 效 果 如 图 4.16 所 示 。 


<style type="text/css"> 
-Icon { 
display: Inline-block: 
width: 16px; height: 20px; 
backeground-1mage: url(1mages/sprite lcons.png): 
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background-color: currentColor; /* 使 用 当前 颜色 控制 图 标的 颜色 */ 


Icon]l {background-position: 0 0:} 

.1con2 {background-position: -20px 0;} 

.1con3 {background-position: -40px 0;} 

.1con4 {backeground-position: -60px 0;} 

link {margin-right: 1 Spx;} 

.link:hover {color: red;}/* 虽 然 改变 的 是 文字 颜色 ， 但 是 图 标 颜 色 也 一 起 变化 了 */ 
</style> 

<a hre 传 " 规 " class="link"><i class="icon iconl"> 一 /人 首页 </a> 
<a hre 传 " 堆 " class="link"><i class="icon icon2" 必 < 人 刷新 </a> 
<a hre 传 " 摘 " class="]link"><i class="icon icon3"></ 户 收藏 </a> 
<a hre 传 " 才 " class="link"><i class="icon icon4" 心 </ 这 展开 </a> 


口 Icecalhost8080/mysite/ x Wn 


一 GC | @ localhost:8080/mysite/test2htn 例 | :; 


个 首页 局 吊 新 到 收藏 WT 


localhost:8080/mysite/test2.html## 


图 4.16 设计 图 标 背 景色 为 currentColor 


会 提示 : 如 果 将 color 属性 设置 为 currentColor， 则 相当 于 color: inherit。 


43 文本 阴影 


使 用 text-shadow 属性 可 以 为 文本 添加 阴影 效果 ， 截 至 目前 ，Safari、Firefox、Chrome 和 Opera 


等 主流 浏览 器 都 支持 该 功能 。 
4.3.1 定义 text-shadow 


text-shadow 属性 是 在 CSS2 中 定义 的 ， 在 CSS2.1 中 被 删除 ， 在 CSS3 的 Text 模块 中 又 恢复 。 基 


本 语法 如 下 : 


text-shadow: none | <length>{12,3} && <color>? 


取 值 简单 说 明 如 下 。 

VY none: 无 阴影 ， 为 默认 值 。 

<length>(D: 第 1 个 长 度 值 用 来 设置 对 象 的 阴影 水 平 偏 移 值 。 可 以 为 负 值 。 
<length>G@): 第 2 个 长 度 值 用 来 设置 对 象 的 阴影 竺 直 偏 移 值 。 可 以 为 负 值 。 
<length>(3): 如 果 提 供 了 第 3 个 长 度 值 则 用 来 设置 对 象 的 阴影 模糊 值 。 不 允许 为 负 值 。 
<color>: 设置 对 象 阴 影 的 颜色 。 

【 示例】 下面 为 段落 文本 定义 一 个 简单 的 阴影 效果 ， 演 示 效 果 如 图 4.17 所 示 。 


<style type="text/css"> 


pi 
text-align: center; 


四 加 网 名 名 
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font: bold 60px helvetica, arlal, sans-serif: ] 
color: #999: | 
text-shadow: 0.1em 0.1em #333; 
: | 
</style> | 


<p>HIMLS+CSS3</p> 
和 2 外- = http://lacalho... ~ 加 GC MA Le te 


HTML5HCSS3 | 


图 4.17 定义 文本 阴影 

“text-shadow: 0.1em 0.1em #333;” 声 明了 右 下 角 文本 阴影 效果 ， 如 果 把 投影 设置 到 左上 角 , 则 可 

以 这 样 声明 
p {text-shadow: -0.lem -0.lem #333;} 


效果 如 图 4.18 所 示 。 
同 理 ， 如 果 设 置 阴影 在 文本 的 左下 角 ， 则 可 以 设置 如 下 样式 : | 


p {text-shadow: -0.1em 0.1em #333;} 
演示 效果 如 图 4.19 所 示 。 | 


图 4.18 定义 左上 角 阴影 图 4.19 定义 左下 角 阴 影 
也 可 以 增加 模糊 效果 的 阴影 ， 效 果 如 图 4.20 所 示 。 
pftext-shadow: 0.1em 0.1em 0.3em #333:} 


或 者 定义 如 下 模糊 阴影 效果 ， 效 果 如 图 4.21 所 示 。 
pi{text-shadow: 0.1em 0.lem 0.2em black:} 


x x 
= 中- E http://ocalho.. » BC|| § localhost x ED 加- E http://ocalho.. ~ Bo | G localhost x 


图 4.20 增加 模糊 阴影 图 4.21 定义 模糊 阴影 | 
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会 提示 : 在 text-shadow 属性 的 第 一 个 值 和 第 二 个 值 中 ， 正 值 偏 右 或 偏 下 ， 负 值 偏 左 或 偏 上 。 在 阴 
影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 模 糊 半 径 是 个 长 度 值 ， 指 出 模糊 效果 的 范围 。 如 何 
计算 模糊 效果 的 具体 算法 并 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 之 后 还 可 以 选择 指定 一 
个 颜色 值 。 颜 色 值 会 被 用 作 阴 影 效 果 的 基础 。 如 果 没 有 指定 颜色 ， 那 么 将 使 用 color 属性 
值 来 替代 。 


4.3.2 ”案例 : 设计 特效 字 


下 面 结 合 示 例 介 绍 如 何 灵 活 使 用 text-shadow 属性 设计 特效 文字 效果 。 
【示例 1】 下 面 示 例 通 过 阴影 把 文本 颜色 与 背景 色 区 分 开 来 ， 让 字体 看 起 来 更 清晰 。 代 码 如 下 ， 
演示 效果 如 图 4.22 所 示 。 


<style type="text/css"> 
pi 
text-align: center; 
font: bold 60px helvetica, arlal, sans-serif: 
color: #fff: 
text-shadow: black 0.1em 0.1em 0.2em: 
} 
</style> 
<p>HIMLS+CSS3</p> 


【示例 2】 下面 示 例 演示 了 如 何 为 红色 文本 定义 3 个 不 同 颜色 的 阴影 ， 演 示 效 果 如 图 4.23 所 示 。 


Xx 


Xx 
oO-erens race ~ eeeeee ace -| 


图 4.22 ”使 用 阴影 增加 前 景色 和 背景 色 对 比 度 图 4.23 ”定义 多 色 阴 影 


当 使 用 text-shadow 属性 定义 多 色 阴 影 时 ， 每 个 阴影 效果 必须 指定 阴影 偶 移 ， 而 模糊 半径 、 阴 影 
颜色 是 可 选 参数 。 


<style type="text/css"> 
pi 
text-align: center:; 
font:bold 60px helvetica, arlal, sans-serif: 
color: red; 
text-shadow: 0.2em 0.Sem 0.1em #600, 
-0.3em 0.1em 0.1em #060, 
0.4em -0.3em 0.1em #006; 
} 
</style> 
<p>HIMLS+CSS3</p> 
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史 
会 提示 : text-shadow 属性 可 以 接受 以 喜 号 分 隔 的 阴影 效果 列表 ， 并 应 用 到 该 元 素 的 文本 上 。 阴 影 
效果 按照 给 定 的 顺序 应 用 ， 因 此 可 能 出 现 互相 履 盖 , 但 是 它们 永远 不 会 改 盖 文本 本 身 。 阴 

影 效 果 不 会 改变 框 的 尺寸 , 但 可 能 延伸 到 它 的 边界 之 外 。 阴影 效果 的 堆 琶 层次 和 元 素 本 身 

的 层次 是 一 样 的 。 

【示例 3】 下 面 示例 演示 把 阴影 设置 到 文本 线 框 的 外 面 。 代 码 如 下 ， 演 示 效 果 如 图 4.24 所 示 。 Note 


<style type="text/css"> 
pi 
text-align: center; 
font:bold 60px helvetica, arlal, sans-serif: 
color: Ted-: 
border:solid 1px red: 
text-shadow: 0.Sem 0.Sem 0.1em #600, 
-lem lem 0.1em #060, 
0.8em -0.8em 0.1em #006; 


} 
</style> 
<p>HTMLS+CSS3</p> 


【示例 4】 下 面 示 例 借助 阴影 效果 列表 机 制 ， 使 用 阴影 登 加 出 燃烧 的 文字 特效 。 代 码 如 下 ， 演 示 
效果 如 图 4.25 所 示 。 | 


<style type="text/css"> 
body {background:#000;:} 
pi 
text-align: center; 
font:bold 60px helvetica, arlal, sans-serif: 
color: red.: 
text-shadow: 0 0 4px white, 
0 -Spx 4px #ff3, 
2pxXx -10px 6px #fd3, 
-2px -1Spx 11px #f80, 
2px -25px 18px #f{20; 
} 
</style> 
<p>HIMLS+CSS3</p> 


图 4.24 将 阴影 设置 到 文本 线 框 外 面 图 4.25 定义 燃烧 的 文字 特效 1 

【示例 $S】text-shadow 属性 可 以 使 用 在 :first-letter 和 :first-line 伪 元 素 上 。 同 时 ， 还 可 以 利用 该 属 

性 设计 立体 文本 。 使 用 阴影 琶 加 出 的 立体 文本 特效 代码 如 下 ， 演 示 效 果 如 图 4.26 所 示 。 通 过 左上 和 
右 下 各 添加 一 个 1px 错位 的 补 色 阴 影 ， 营 造 出 一 种 淡淡 的 立体 效果 。 | 
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<style type="text/css"> 

body {background: #000;} 

pi 
text-align: center; 
padding: 24px; 
margin: 0; 
font-family: helvetica, arial, sans-serif; 
font-size: 80px; 
font-weight: bold; 
color: #D1DI1D!1: 
background: #CCC:; 
text-shadow: -1px -1px white, 

lpx lpx #333: 

} 

</style> 

<p>HIMLS+CSS3</p> 


【示例 6】 反 向 思维 ， 利 用 示例 5 的 设计 思路 ， 也 可 以 设计 一 种 凹 体 效果 ， 设 计 方 法 就 是 把 示例 


5 中 左上 和 右 下 阴影 颜色 颠倒 即 可 。 主 要 代码 如 下 ， 演 示 效 果 如 图 4.27 所 示 。 


<style type="text/css"> 

body {background: #000;} 

pi 
text-align: center; 
padding: 24px; 
margin: 0; 
font-family: helvetica, arial, sans-serif; 
font-size: 80px:; 
font-weight: bold; 
color: #D1DI1D!1: 
background: #CCC.:; 
text-shadow: 1px lpx white, 

-lpx -1px #333; 

} 

</style> 

<p>HIMLS+CSS3</p> 


Xx 
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中- 看 htpy/localhost80: * 凡 名 入 localhost 


HTMLS+CSS: 


HTNIL SCS 


图 4.26 ”定义 凸 起 的 文字 效果 图 4.27 定义 四 下 的 文字 效果 
【示例 7】 使 用 text-shadow 属性 可 以 为 文本 摘 边 ， 设 计 方 法 是 分 别 为 文本 4 个 边 添加 lpx 的 实 
体 阴 影 。 代 码 如 下 ， 演 示 效 果 如 图 4.28 所 示 。 


<style type="text/css"> 
body {background: #000:} 


pi 


。 90。 


第 后 间 使 用 CSS3 设计 特许 文 东 SA 
名 4 | 


text-align: center; 
padding:24px:; 
margin:0; 
font-family: helvetica, arial, sans-serif; 
font-size: 80px: | 生 
font-weight: bold: | 
color: #D1D1D}1: 
background:#CCC: Note 
text-shadow: -1px 0 black, 
0 lpx black, 
lpx 0 black, 
0 -1px black: 


} 
</style> 
<p>HTMLS+CSS3</p> 


【示例 8】 设 计 阴 影 不 发 生 位 移 ， 同 时 定义 阴影 模糊 显示 ， 这 样 就 可 以 模拟 出 文字 外 发 光 效 果 。 
代码 如 下 ， 演 示 效 果 如 图 4.29 所 示 。 


<style type="text/css"> 

body {background: #000:} 

pi 
text-align: center:; 
padding:24px:; 
margin:0; 
font-family: helvetica, arial, sans-serif: 
font-size: 80px:; 
font-weight: bold; 
color: #D1D1D!1: 
background:#CCC: 
text-shadow: 0 0 0.2em #E87, 

0 0 0.2em #F 87: 


} 
</style> 


<p>HTML5+CSS3</p> 


Xx 


,= +) @ http://localhost:a0:  @ 0 || @ localhost 由 | 了 让 +) 厂 hitp://localhost:s0: v & 上 他 太 这 


HTMLS54CSS3| | HVILSNOSEE 


图 4.28 定义 描 边 文字 效果 图 4.29 定义 外 发 光 文字 效果 


4.4 内 容 生 成 和 替换 


content 属性 属于 内 容 生成 和 蔡 换 模块 , 可 以 为 匹配 的 元 素 动 态 生成 内 容 。 这 样 就 能 够 满足 在 CSS 


es。 OO1T 。 


Note 


”样式 设计 中 临时 添加 非 结构 性 的 样式 服务 标签 或 者 补充 说 明 性 内 容 等 。 


: 4.4.1 定义 content 


Csss 网 页 设计 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


权威 参考 : http://www.w3.org/TR/css3-content/。 


content 属性 的 简明 语法 如 下 : 

content: normal | string | attr() | urlO | counter() | none: 

取 值 简单 说 明 如 下 。 

可 normal: 默认 值 ， 表 现 与 none 值 相同 。 

string: 插入 文本 内 容 。 

attr0: 插入 元 素 的 属性 值 。 

url0: 插入 一 个 外 部 资源 ， 如 图 像 、 音 频 、 视 频 或 浏览 器 文 持 的 其 他 任何 资源 。 
counter(): 计数 器 ， 用 于 插入 排序 标识 。 

none: 无 任何 内 容 。 


和 人 办 多 的 


加 


会 ”提示 : content 属性 早 在 CSS2 .1 中 就 被 引入 ， 可 以 使 用 :before 和 :after 伪 元 素 生 成 内 容 。 此 特性 


目前 已 被 大 部 分 的 浏览 器 支持 ， 另 外 Opera 9.5+ 和 Safari 4 已 经 支持 所 有 元 素 的 content 
属性 ， 而 不 仅仅 是 :before 和 :after 伪 元 素 。 
在 CSS3 Generated Content 工作 草案 中 ，content 属性 添加 了 更 多 的 特征 ， 如 插入 以 及 移 除 
文档 内 容 的 能 力 ， 可 以 创建 脚注 、 段 落 注释 等 。 但 目前 还 没有 浏览 器 支持 content 的 扩展 
功能 。 
【示例 1】 下 面 示 例 使 用 content 属性 为 页 面 对 象 添加 外 部 图 像 ， 演 示 效 果 如 图 4.30 所 示 。 
<style type="text/css"> 
div:after { 
border: solid 10px red; 
content: url(images/bg.pneg); /* 在 div 元 素 内 添加 图 片 */ 


} 
</style> 
<div> 
<h2> 动 态 生 成 的 图 片 </h2> 
</div> 


C | Iocalhost8080/mysite/test 站 | : 


动态 生成 的 图 片 


图 4.30 ”动态 生成 图 像 演示 效果 
。02。 
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< 作 注意 : content 属性 通常 与 :after 及 :before 伪 元 素 一 起 使 用 ， 在 对 象 前 或 后 显示 内 容 。 


【示例 2】 下 面 示例 使 用 content 属性 把 超 链 接 的 URL 字符 串 动 态 显示 在 页 面 中 ， 演 示 效 果 如 图 4.31 


所 示 。 
<style type="text/css"> 
a:after { 
content: attr(href): 
} 
</style> 
<a href="http://www.baidu.com/"> 百 度 </a> 


| -Bhitpi/hocalho.. - 明 0 


图 4.31 


4.4.2 案例 : 应 用 content 


下 面 结合 多 个 示例 练习 content 在 网 页 中 的 应 用 。 


【示例 1】 下 面 示例 使 用 content 属性 ， 配 合 CSS 计数 器 设计 多 层 同 套 有 序列 表 序 号 样式 ， 效 果 | 


如 图 4.32 所 示 。 


<style type="text/css"> 
ol {list-style:none:;} 
li:before {color:#f00; font-family:Times New Roman:} 
li{counter-increment:a 1;} 
li:before{content:counter(a)". ":;} 
li li{counter-increment:b 1:;} 
li li:before{content:counter(a)"."counter(b)". ":} 
li lili{counter-increment:c 1:;} 
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ":;} 
</style> 
<hl> 网 站 导航 </h1> 
<ol> 
<li> 新 闻 
<ol> 
<] 二 国际 新 闻 </li> 
<li> 国 内 新 闻 
<ol> 
<li> 互 联网 /科技 </Li> 
<]li> 财 经 /理财 </i> 
</ol> 
< 路 > 
</ol> 
</l> 
<li> 交 互 < 由 > 
</ol> 


。03。 


x 


把 属性 值 显示 在 页 面 中 


庶 清 除 默 认 的 序号 */ 

谍 设 计 层 级 目录 序号 的 字体 样式 */ 

谍 设 计 递 增 函 数 a， 北 增 起 始 值 为 1*/ 
此 把 递增 值 添加 到 列表 项 前 面 */ 

谍 设 计 递 增 函 数 b， 递 增 起 始 值 为 1*/ 
虑 把 递增 值 添加 到 二 级 列表 项 前 面 */ 
谍 设 计 递 增 函 数 c， 北 增 起 始 值 为 1*/ 
记 把 递增 值 添 加 到 三 级 列表 项 前 面 */ 


< ™ (sss 网页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


SI ochor 
网 站 导航 


1. 新 闻 __ 
1.1. 国际 新 闻 
12. 国内 新 闻 
1.2.1. 互 


.2.1. 互 联网 利 技 
1.2.2. 财 经 /理财 


Note 和 


4.32 使 用 CSS 技巧 设计 多 级 层级 目录 序号 
| 【示例 2】 下 面 示 例 使 用 content 为 引文 动态 添加 引号 ， 演 示 效 果 如 图 4.33 所 示 。 


] <style type="text/css"> 

旋 为 不 同 语言 指定 引号 的 表现 */ 

:lang(en) > q {quotes:"" "":} 

:lang(no) > q {quotes:"«" "»":} 

:lang(ch) > q {quotes:™" ™™":} 

/# 在 q 标签 的 前 后 插入 引号 */ 

] dq:before {content:open-quote;} 

| dq:after {content:close-quote:;} 

</style> 

| <p lang="no"><q>HTIML5+CSS3 从 入 门 到 精通 </q></p> 
<p lang="en"><q>CSS Generated Content Module Level 3</p> 
| <p lang="ch"><q>CSS 生成 内 容 模块 3.0</q></p> 

| 

| 


【示例 3】 下 面 示例 使 用 content 为 超 链 接 动态 添加 类 型 图 标 ， 演 示 效 果 如 图 4.34 所 示 。 
<style type="text/css"> 
a[href $=".pdf"']:after { 
content:url(images/icon pdf.png); 
} 


alrel = "external"l:after { 
content:url(1mages/icon limnk.png): 
} 
</style> 
<a hre 人 ="http://www.book.com/1688.pdf'>《HTML5+CSS3 从 入 门 到 精通 》</a><br> 
<a href="http://www.book.com/1688/" rel="external">《HTML5+CSS3 从 入 门 到 精通 》</a> 


Xx 


© EE 


- Ee 
<HTML5+CSS3 从 入门 到 精通 > 3 @ ntp//loc 


HTMIL5+CSS3 从 入 | ] 于 | 肖 衣 雇 六 


"CSS Generated Content Module Level 3" HIMLS+CSS3? 从 门 到 幸 有 今 加 


“CSS 生 成 内 容 模块 3.07 


http:f/www.book.com/1688/ 


图 4.33 动态 生成 引号 图 4.34 动态 生成 超 链接 类 型 图 标 


4.5 网 络 字 体 


CSS3 人 允许 用 户 通过 @font-face 规则 加 载 网 络 字体 文件 ， 方 便 用 户 自 定义 字体 类 型 。@font-face 


PE BE 


.94。 
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规则 在 CSS3 规范 中 属于 字体 模块 。 
权威 参考 : http://www.w3.org/TR/css3-fonts/#font-face。 


4.5.1 使 用 @font-face 
@font-face 规则 的 语法 格式 如 下 : 


(@font-face {<font-description>} 


@font-face 规则 的 选择 符 是 固定 的 ， 用 来 引用 网 络 字体 文件 。<font-description> 是 一 个 属性 名 值 ， 
格式 类 似 如 下 样式 : 


descriptor: value; 
descriptor: value; 
descriptor: value; 
descriptor: value; 


[| 

descriptor: value:; 

属性 及 其 取 值 说 明 如 下 。 

font-family: 设置 文本 的 字体 名 称 。 

font-style: 设置 文本 样式 。 

font-variant: 设置 文本 是 侣 大 小 写 。 

font-weight: 设置 文本 的 粗细 。 

font-stretch: 设置 文本 是 否 横 癌 拉 伸 变形 。 

font-size: 设置 文本 字体 大 小 。 

src: 设置 目 定 义 字 体 的 相对 或 者 绝对 路 径 。 注 意 ， 该 属性 只 用 在 @font-face 规则 里 。 


示 : 事实 上 ，IE 5 已 经 开始 支持 该 属性 ， 但 是 只 支持 微软 自 有 的 .eot (Embedded Open Type ) 
字体 格式 ， 而 其 他 浏览 器 直到 现在 都 不 支持 这 一 字体 格式 。 不过， 从 Safari 3.1 开始 ,用 ， 
户 可 以 设置 ttf ( TrueType ) 和 .otf (OpenType ) 两 种 字体 作为 自 定义 字体 。 考 虑 到 浏览 器 
的 兼容 性 ， 在 使 用 时 建议 同时 定义 .eot 和 .ttf， 以 便 能 够 兼容 所 有 主流 浏览 器 。 


【示例 】 下 面 是 一 个 简单 的 示例 ， 演 示 如 何 使 用 @font-face 规则 在 页 面 中 使 用 网 络 字体 。 示 例 代 
码 如 下 ， 汗 示 效 果 如 图 4.35 所 示 。 | 


<style type="text/css"> 
闫 引入 外 部 地 体 广 件 
(@font-face { 
此 选 择 默 认 的 字体 类 型 */ 
font-famlly: "lexograph"; 
兼容 IE*/ 
sre: url(http://randsco.com//fonts/lexograph.eot); 
/# 兼 容 非 正 */ 
src: local("Lexographer"), url(http://randsco.com/fonts/lexograph.ttf) format("truetype"); 
} 
hl { 
/# 设 置 引 入 字体 文件 中 的 lexograph 字体 类 型 */ 
font-family: lexograph, verdana, sans-serif: 


对 


- 


四 


注 办 办 办 办 办 加 


vn/ 
二 


。 ON。 


font-size:4em;} 
</style> 
<hl>http://www.baidu.com/</h1> 


[localhosVrnrsite/testhl x 


《- © BD localhost/mysite/test.html 


HIPAA WW BA OU MI 


图 4.35 设置 为 lexograph 字体 类 型 的 文字 

会 提示 : 谈 入 外 部 字体 需要 考虑 用 户 带 宽 问题 ， 因 为 一 个 中 文字 体 文 件 小 的 有 几 个 兆 ,， 大 的 有 十 几 
兆 , 这 么 大 的 字体 文件 下 载 过 程 会 出 现 延 迟 ,同时 服务 器 也 不 能 忍受 如 此 频繁 的 中 请 下 载 。 
如 果 只 是 想 标题 使 用 特殊 字体 ， 最 好 设计 成 图 片 。 


这 452 案例: 设计 字体 图 标 


本 节 示 例 通 过 @font-face 规则 引入 外 部 字体 文件 glyphicons-halflings-regulareot， 然 后 定义 几 个 字 


“ 体 图 标 ， 嵌 入 导航 菜单 项 目 中 ， 效 果 如 图 4.36 所 示 。 


图 4.36 设计 包含 字体 图 标的 导航 某 单 


示例 主要 代码 如 下 : 


<style type= "text/css"> 
谍 引 入 外 部 字体 文件 */ 


(font-face { 
font-family: 'Glyphicons Halflings': /# 选 择 默认 的 字体 类 型 部/ 
诺 外 部 字体 文件 列表 */ 


sre: url('fonts/glyphicons-halflings-regular.eot'"); 

sre: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
url('fonts/glyphicons-halflings-regular.woff2") format(‘woff2'"), 
url('fonts/glyphicons-halflings-regular.woff ) format('‘woff), 
url('fonts/glyphicons-halflings-regular.ttf ) format('truetype'), 
url('fonts/glyphicons-halflings-regular.sveg#eglyphicons halflingsregular') format('sve'); 


} 

上 # 定 义 字 体 图 标 样式 类 

.glyphicon { 
position: relative: 诺 相 对 定位 */ 
top: 1px: 雍 相 对 向 上 偏 移 1px*/ 
display: inline-block: 谍 行 内 块 显示 */ 
font-family: 'Glyphicons Halflings': /# 定 义 字体 类 型 
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font-style: normal; 话 字 体 样式 */ 

font-weight: normal; 诺 字 体 粗细 */ 

line-height: 1; /# 定 义 行 高 ， 清 除 文本 行 对 图 标的 影响 阁 
-webkit-font-smoothing: antialiased: 访 兼 容 谷 歌 浏览 器 解析 */ 
-moz-osx-font-smoothing: grayscale; 话 兼 容 Firefox 浏览 器 解析 */ 


} 
.glyphicon-home:before {content: "\e021";} 


.glyphicon-user:before {content: "\e008";} 
.glyphicon-search:before {content: "\e003":} 
.glyphicon-plus:before {content: "\e081";} 
span {/* 定 义 字 体 图 标 标签 样式 */ 
font-size: 16px; 
color: red; 


} 

ul {* 定 义 导航 列表 框 样式 ， 清 除 默认 样 式 */ 
margin: 0: 
padding: 0; 
list-style: none; 


} 

li {/* 定 义 列表 项 目 样 式 ， 水 平 并 列 显 示 */ 
float: left: 
padding: 6px 12px; 
margin: 3px; 
border: solid 1px hsla(359,93%,69%,0.6); 
border-radius: 6pX: 


} 
lia {/* 定 义 超 链接 文本 样式 */ 
font-size: 16px; 
color: red: 
text-decoration: none: 
} 
</style> 
<ul> 
<li><span class="glyphicon glyphicon-home"></span> <a hre 人 ="#"> 主 页 </a></li> 
<li><span class="glyphicon glyphicon-user"></span> <a hre 人 ="#"> 登 录 </a></li> 
<li><span class="glyphicon glyphicon-search"></span> <a href="#"> 搜 索 </a></li> 
<li><span class="glyphicon glyphicon-plus"></span> <a hre 人 ="#"> 添 加 </a></li> 
</ul> 


4.6 案例 实战 


本 节 将 以 案例 形式 实战 练习 CSS3 新 增 的 文本 属性 。 
4.6.1 设计 器 科技 网 站 让 页 


本 案例 将 模拟 一 个 黑 科技 网 站 的 首页 ， 借 助 text-shadow 属性 设计 阴影 效果 ， 通 过 颜色 的 搭配 ， 营 
造 一 种 静 谦 而 又 神秘 的 画面 ， 使 用 两 幅 PNG 图 像 对 页 面 效 果 进 行 装饰 和 点 级 ， 最 后 演示 效果 如 图 4.37 ， 


。 Of。 


vote 


te (sss 网页 统计 以 入 门 到 精通 (机 刍 料 纺 版) 


> 
所 示 。 
| 四 .经 ntpnocahosts0somy ~ 
图 4.37 设计 黑 科 技 网 站 首页 
案例 主要 代码 如 下 : 
<style type="text/css"> 
body {/* 页 面 样式 */ 


padding: 0px; margin: Opx: ”清除 页 边 距 */ 
backeround: black: color: #666:} 
#text-shadow-box {/* 设 计 包 含 框 样式 */ 
诺 定 义 内 部 的 定位 元 素 以 这 个 框 为 参照 物 */ 
position: relative; 
width: 598px;:; height: 406px:; 
backeround: #666; 
上 禁止 内 容 超过 设 定 的 区 域 */ 
overflow: hldden: 
border: #333 1px solid;} 
#text-shadow-box div.wall {/* 设 计 背 景 墙 样式 */ 
position: absolute: 
width: 100%: 
top: 17Spx; left: Opx} 
#text {+ 设计 导航 文本 样式 */ 
text-align: center; line-height: 0.Sem: 
margin: Opx:; 
font-family: helvetica, arlal, sans-serif: 
height: 1px:; 
color: #999: font-size: 80px; font-weight: bold: 
text-shadow: Spx -Spx 16px #000:} 
divwall div {/* 设 计 和 遮盖 层 样式 */ 
position: absolute: 
width: 100%:; height: 300px: 
top: 42px; left: Opx: 
background: #999:} 
谍 设 计 窗 盖 在 上 面 的 探照灯 效果 图 */ 
#spotlight { 


position: absolute:; 
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width: 100%:; height: 100%: 

top: Opx; left: Opx; 

backeground: url(1mages/spotlight.png) center -300px:; 
font-size: 12px:} 


#spotlight a { 
color: #ccece; text-decoration: none; 尖 几 
position: absolute: Note 


left: 45%;:; top: 58%; 
text-shadow: 1px 1px #999, -1px -1px #333;} 
#cat { 
position: absolute: 
top: 130px; left: 260px; 
z-index: 1000: 
opacity: 0.5;} 
#cat 1mg {width: 80px:} 
</style> 
<div 1d="text-shadow-box"> 
<div class="wall"> 
<p id="text">CSS3 黑 科 技 </p> 
<div></div> 
</div> 
<div 1d="spotlight"><a href="index.htm"> 入 口 </a></div> 
<div 1d="cat"><1mg src="i1mages/cat.png"></div> 
</div> 


定义 页 面 背 景色 为 黑色 ， 前 景色 为 灰色 。 设 计 右 上 偏 移 的 阴影 适当 进行 模糊 处 理 ， 产 生 色 尝 效 
果 ， 阴 影 色 为 深 色 ， 营 造 静 谥 的 主观 效果 。 设 计 一 个 遮 单 层 ， 让 其 禾 新 在 页 面 上 ， 使 其 满 究 口 显 示 ， 
通过 前 期 设计 好 的 一 个 探照灯 背景 来 营造 神秘 效果 。 通 过 <div id="spotlight"> 外 单 ， 为 页 面 获 病 一 层 
桌 纸 ， 添 加 特殊 的 艺术 效果 。 


4.6.2 ”设计 消息 提示 框 


本 节 将 借助 CSS3 增强 的 文本 特性 和 相关 动画 功能 ， 设 计 一 个 纯 CSS 的 消息 提示 框 ， 效 果 如 图 4.38 
所 示 。 


Xx 


> | 硬 http://localhost: B080/mysite/index.him| © 愿 localhost x 首 oo 


图 4.38 设计 消息 提示 框 
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【操作 步骤 】 
第 1 步 ， 设 计 消 息 框 基本 框架 样式 。 
-bubble { 
人 ay | width: 200px: eight: 50px: 诺 定 义 消 息 框 大 小 ， 可 忽略 ， 让 消息 框 自 由 收缩 */ 
A background:hsla(93,96%,62%,1): /# 定 义 背 景色 ， 必 须 与 下 面 箭头 背景 色 保 持 一 致 W/ 
padding: 12px: /# 增 加 补 白 ， 防 止 消息 文本 跑 到 框 外 关 
| position: relative: 谍 定 义 定 位 包含 框 ， 方 便 定位 第 头 */ 
border-radius: 8px:; 访 圆 角 */ 
} 
第 2 步 ， 以 内 容 生 成 的 方式 ， 设 计 租 头 基 本 样式 。 
.bubble:before { 
content: "": 此 不 显示 任何 内 容 */ 
width: 0: height: 0: /# 定 义 箭头 内 容 区 大 小 #/ 
position: absolute: /# 绝 对 定位 汉 / 
z-index:-1: /显示 在 消息 框 的 下 面 妆 
} 
第 3 步 ， 设 计 左 侧 消息 提示 框 的 扩展 样式 。 
.bubble.bubble-left:before { 
记 调 整 币 头 的 位 置 ，right 值 不 动 ，top 值 可 以 微调 ， 百 分 比值 ， 能 自 适 应 消息 框 的 大 小 变化 */ 
right: 9090: 
top: 350%; 
上 # 定 义 箭 头 的 倾斜 角度 状 
transform: rotate(-2Sdeg); 
/定义 箭头 的 长 得、 粗细 。border-top 和 border-bottom 控制 粗糙 和 偏向 ， 
border-right 控制 长 短 ， 其 颜色 值 必须 与 消息 框 背 景色 保持 一 致 */ 
border-top: 20px solid transparent; 
border-right: 80px solid hsla(93,96%.,62%,1): 
border-bottom: 20px solid transparent; 
} 


第 4 步 ， 模 仿 第 3 步 ， 设 计 右 侧 消息 提示 框 的 扩展 样式 。 


.bubble.bubble-right:before { 
left: 90%: top: 50%: 
transform: rotate(25deg); 
border-top: 20px solid transparent: 
border-left: 80px solid hsla(93,96%,62%,1); 
border-bottom: 20px solid transparent; 


} 
第 5 步 ， 模 仿 第 3 步 ， 设 计 项 部 消息 提示 框 的 扩展 样式 。 
.bubble.bubble-top:before { 
bottom: 80%: left: $0%: 
transform: rotate(25deg); 
border-left: 20px solid transparent: 
border-bottom: 80px solid hsla(93,96%,62%,1); 
border-right: 20px solid transparent: 
} 
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第 6 步 ， 设 计 底 部 消息 提示 框 的 扩展 样式 。 


.bubble.bubble-bottom:before { 
top: 80%:left: $0%: 
transform: rotate(25deg); ] Ey 
border-left: 20px solid transparent': | 上 = 
border-top: 80px solid hsla(93,96%,62%,1): 
border-right: 20px solid transparent; JNote 
} | 
第 7 步 , 在 文档 中 插入 消息 提示 框 , 使 用 类 样式 进行 定义 。 bubble 定义 消息 框 , bubble-left bubble- 
right、bubble-bottom 和 bubble-top 定义 不 同方 向 显示 。 代 码 如 下 : 


<div class="bubble bubble-left"> 左 侧 消 息 提 示 框 <br>class="bubble bubble-left"</div> 

<div class="bubble bubble-right"> 右 侧 消 息 提 示 框 <br>class="bubble bubble-right"</div> 
<div class="bubble bubble-bottom'"> 底 部 消息 提示 框 <br>class="bubble bubble-bottom"</div> 
<div class="bubble bubble-top'> 顶 部 消息 提示 框 <br>class="bubble bubble-top"</div> 


4.7 在 线 练 习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HIMLS 语义 标签 灵活 定义 网 页 文本 样式 和 版 
式 : (1) 标识 文本 ; (2) 文本 流 方 问 。 
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使 用 CSS 设计 背景 样式 


企 CSS2.1 中 ，background 属性 的 功能 还 无 法 满足 设计 的 需求 ， 为 了 方便 设计 师 更 灵活 
地 设计 需要 的 网 页 效果 ，CSS3 在 原 有 background 基础 上 新 增 了 一 些 功 能 属性 ， 可 以 在 同一 
个 对 象 内 又 加 多 个 背景 图 像 ， 可 以 改变 背景 图 像 的 尺寸 , 还 可 以 指定 背景 图 像 的 显示 范围 和 
绘制 起 点 等 。 另 外 ，CSS3 允许 用 户 使 用 渐变 函数 绘制 背景 图 像 ， 这 极 大 地 降低 了 网 页 设计 
的 难度 ， 激 发 了 设计 师 的 创意 灵感 。 


【 学 习 重 点 】 

WV 设置 背景 图 像 的 原点 、 大 小 。 

正确 使 用 背景 图 像 裁 切 属性 。 

灵活 使 用 多 重 背 景 图 像 设 计 网 页 版 面 。 
正确 使 用 线性 渐变 和 径 向 渐变 。 
熟练 使 用 渐变 函数 设计 网 页 元 件 。 


部 音 吾 有 


第 9 章 使 用 CSS 设计 背景 样式 Sm 


5.1] 设计 和 闪 景 图 像 


CSS3 增强 了 background 属性 的 功能 ， 人 允许 在 同一 个 元 素 内 有 登 加 多 个 背景 图 像 ， 还 新 增 了 3 个 与 
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背景 相关 的 属性 : background-clip、background-origin、backeground-size。 
下 面 分 别 进行 介绍 。 
权威 参考 : http://www.w3.org/TR/css3-background/。 


5.1.1 设置 背景 图 像 
在 CSS 中 可 以 使 用 background-image 属性 来 定义 背景 图 像 。 有 具体 用 法 如 下 : 


backeground-1mage: none | <url> 


默认 值 为 none， 表 示 无 背景 图 ，<url> 表 示 使 用 绝对 或 相对 地 址 指定 背景 图 像 。 


六 提示 : GIF 格式 图 像 可 以 设计 动画 、 透 明 背 景 ， 具 有 图 像 小 巧 等 优点 ， 而 JPG 格式 图 像 具 有 更 丰 


富 的 颜色 数 ， 图 像 品 质 相 对 要 好 ，PNG 类 型 则 综合 了 GIF 和 JPG 两 种 格式 图 像 的 优点 。 


【示例 】 如 果 背 景 包含 透明 区 域 的 GIF 或 PNG 格式 图 像 ， 则 被 设置 为 背景 图 像 时 ， 这 些 透 明 区 
域 依 然 被 你 留 。 在 下 面 这 个 示例 中 ， 先 为 网 页 定义 背景 图 像 ， 然 后 为 段落 文本 定义 透明 的 GIF 背景 图 


像 ， 显 示 效 果 如 图 5.1 所 示 。 


<style type="text/css"> 

html, body, p {height: 100%:;} 

body {background-1mage:url(i1mages/bg.jpe);} 
p {background-1mage:url(1mages/ren.pneg);} 
</style> 

<p></p> 
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5.1.2 设置 显示 方式 


CSS 使 用 background-repeat 属性 控制 背景 图 像 的 显示 方式 。 有 具体 用 法 如 下 : 
background-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat|{1,2} 


取 值 说 明 如 下 。 

Yrepeat-x: 背景 图 像 在 横向 上 平 铺 。 

repeat-y: 背景 图 像 在 纵 同 上 平 铺 。 

repeat: 背景 图 像 在 横向 和 纵向 平 铺 。 

space: 背景 图 像 以 相同 的 间距 平 铺 且 填充 满 整 个 容器 或 某 个 方向 ， 仅 CSS3 支持 。 

round: 背景 图 像 自动 缩放 直到 适应 且 填 充满 整个 容器 ， 仅 CSS3 支持 。 

no-repeat: 背景 图 像 不 平 铺 。 

【示例 】 下 面 示例 设计 一 个 公司 公告 栏 ， 其 中 宽度 是 固定 的 , 但 是 高 度 可 能 会 根据 正文 内 容 进行 


人 办 锥 的 


动态 调整 ， 为 了 适应 这 种 设计 需要 ， 不 妨 利用 垂直 平 铺 来 进行 设计 。 


【操作 步骤 】 
第 1 步 ， 把 “公司 公告 ”栏目 分 隔 为 上 、 中 、 下 3 块 ， 设 计 上 和 下 为 固定 宽度 ， 而 中 间 块 为 可 以 


随时 调整 高 度 。 设 计 的 结构 如 下 : 


<div 1d="call"> 
<div id="call tit"> 公 司 公告 </div > 
<div 1d="call mid"></div > 
<div 1d="call btm"></div > 

</div> 


第 2 步 ， 所 实现 的 样式 表 如 下 ， 最 后 经 过 调整 中 间 块 元 素 的 高 度 以 形成 不 同 高 度 的 公告 牌 ， 演 示 


”效果 如 图 5.2 所 示 。 


<style type="text/css"> 

#call { 
width:218px: 谍 固 定 宽度 */ 
font-size:14px: /字体 大 小 并 

} 

nd 
backeground:url(images/call top.gif): /# 头 部 背景 图 像 委 
background-repeat:no-Tepeat': 话 不 平 铺 显 示 */ 
height:43px: 旋回 定 高 度 ， 与 背景 图 像 高 度 一 致 */ 
color:#fff: 上 诺 白 色 标 题 */ 
font-weight:bold:; 谍 粗 体 */ 
text-align:center; 诺 居 中 显示 */ 
line-height:43px: /# 标 题 垂 直 居 中 类 

} 

#call md { 
background-image:url(images/call mid.gifj; ”/* 背 景 图 像 */ 
background-repeat:repeat-y: /# 徘 直 平 铺 间 
height: 160px: 谍 可 自由 设置 的 高 度 */ 

} 

#call btm { 
background-image:url(images/call btm.gif)j; ”心底 部 背景 图 像 */ 
background-repeat:no-repeat: /# 不 平 铺 显示 天 
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height: 1 1px; 此 固定 高 度 ， 与 背景 图 像 高 度 一 致 */ 


其 3 幅 背 景 图 像 , 2 幅 固 定 ， 
a 全 "eed 中 间 一 幅 垂直 平 铺 


height: 120px: ight: : ight: | Note 


图 5.2 背景 图 像 季 直 平 铺 示 例 模 拟 效果 
5.1.3 设置 显示 位 置 


在 默认 情况 下 ， 背 景 图 像 显 示 在 元 素 的 左上 角 ， 并 根据 不 同方 式 执行 不 同 显示 效果 。 为 了 更 好 地 
控制 背景 图 像 的 显示 位 置 ，CSS 定义 了 background-position 属性 来 精确 定位 背景 图 像 。 

background-position 属性 取 值 包括 两 个 值 ， 分 别 用 来 定位 背景 图 像 的 x 轴 、y 轴 上 坐标 ， 取 值 单 位 
没有 限制 。 具 体 用 法 如 下 : 

background-position: [left | center | right | top | bottom | <percentage> | <length>] | [left | center | right | 
<percentage> | <length> ] [top | center | bottom | <percentage> | <length>] | [ center | [ left | nght] [<percentage> | 
<length>]? ] && [ center | [top | bottom] [<percentage> | <length>]?] 

默认 值 为 0% 0%， 等 效 于 left top。 

【示例 】 下 面 示例 利用 4 个 背景 图 像 拼接 起 来 组 成 一 个 栏目 版 块 。 这 些 背 景 图 像 分 别 被 定位 到 栏 

目的 4 个 边 上 ， 形 成 一 个 圆 角 的 和 矩形， 并 富有 立体 感 ， 效 果 如 图 5.3 所 示 。 


ssl | So Whatis This About? | x 
mr br le ,Be 


于 网 页 设计 师 来 说 应 该 好 好 研究 CSS。Zen 
天 Garden 竹 力 于 推广 和 使 用 CSS 技 术 ， 努 力 激 发 和 
鼓励 您 的 灵感 和 参与 。 读者 可 以 从 浏览 高 手 的 设 
计 作品 入 门 。 吕 要 选择 列 吉 中 的 任 一 个 样式 胡 ， 就 可 以 将 它 加 载 到 这 个 写 。 


。 中 。HTML 文 档 结构 始终 不 变 ， 但 是 读者 可 以 自由 地 修改 和 定义 CSS 样 : 


bs CSS 有 具有 强大 的 功能 ， 可 以 自由 控制 HTML 结 构 。 当然 读者 希 辐 舞 套 兰 
Css 技术 的 能 力 和 创意 的 灵感 ， 同 时 亲自 动手 ， 用 具体 的 实例 展示 d 2 
展示 个 人 的 才华 。 截 至 目前 ， 很 多 Web 设 计 师 和 程序 员 已 经 介绍 过 


技巧 和 兼容 技术 的 各 种 技巧 和 案例 。 而 平面 设计 师 还 没有 足够 重视 CSS 的 潜力 。 
读者 是 不 是 需要 从 现在 开始 呢 ? 


So Tr Wn . ge ey 4 
TS a ee 


一 


5.3 ”背景 图 像 定位 综合 应 用 
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实例 所 用 到 的 HTML 结构 代码 如 下 : 


<div 1d="explanation"> 

<h3><span> 这 是 什么 ?</span></h3> 

<p class="p1"><span><span class="first"> 对 </span> 于 网 页 设计 师 来 说 应 该 好 好 研究 <acronym title= 
"cascading style sheets">CSS</acronym>。Zen Garden 致力 于 推广 和 使 用 CSS 技术 ， 努 力 激发 和 鼓励 您 的 灵感 和 
参与 。 读 者 可 以 从 浏览 高 手 的 设计 作品 入 门 。 只 要 选择 列表 中 的 任 一 个 样式 表 ， 就 可 以 将 它 加 载 到 这 个 页 面 中 。 
<acronym title="hypertext markup language">HTML</acronym> 文 档 结 构 始 终 不 变 ， 但 是 读者 可 以 自由 地 修改 和 定 
义 <acronym title="cascading style sheets">CSS</acronym> 样 式 表 。</span></p> 

<p class="p2"><span><acronym title="cascading style sheets">CSS</acronym> 具 有 强大 的 功能 ， 可 以 自由 


”控制 HTML 结构 。 当 然 读 者 需要 拥有 驾驭 CSS 技术 的 能 力 和 创意 的 灵感 ， 同 时 亲自 动手 ， 用 具体 的 实例 展示 
CSS 的 魅力 ， 展 示 个 人 的 才华 。 截 至 目前 ， 很 多 Web 设计 师 和 程序 员 已 经 介绍 过 关于 CSS 应 用 技巧 和 兼容 技术 
的 各 种 技巧 和 案例 。 而 平面 设计 师 还 没有 足够 重视 CSS 的 潜力 。 读 者 是 不 是 需要 从 现在 开始 呢 ? </span></p> 


</div> 
根据 这 个 HTML 结构 所 设计 的 CSS 样式 表 如 下 请 注意 背景 图 像 的 定位 方法 ): 
<STYLE type=“‘text/css”> 


body { /* 定 义 网 页 背景 色 、 居 中 显示 、 字 体 颜 色 */ 
background:#DFDFDEF: text-align:center:; color:#454545; 


. 

Pp; h3 {margin:0; padding:0;}/* 清 除 段 落 和 标题 的 默认 边 距 */ 

#explanation { 
background-color:#fFFFFF: /# 白 色 背 景 ， 填 充 所 有 区 域 专 
background-image:url(images/ime explanation.jpe); 访 指 定 背 景 图 像 */ 
background-position:left bottom:; 访 定 位 背景 图 像 位 于 左下 角 */ 
background-repeat:repeat-y; 上 * 在 牌 直 方 句 上 平 铺 背 景 图 像 */ 
width:S46px: /# 固 定 栏目 宽度 
margin:0 auto: /# 栏 目 居中 显示 头 
font-size:13px;: line-height: 1.6em: text-indent:2em: /定义 栏目 内 字体 属性 #/ 

} 

#explanation h3 { 
background:url(images/title explanation.gif) no-repeat; 。”/* 顶 部 背景 图 人像， 不平 铺 */ 
height:39px: 诺 固 定 标题 栏 高 度 */ 

} 

#explanation h3 span { display:none: } 上 话 隐 藏 标题 栏 内 信息 */ 

#explanation p { /# 定 义 右 侧 背景 图 像 ， 垂 直 平 铺 关 

background:url(1mages/right bg.glb night repeat-y:} 

#explanation .p2 span { /# 底 部 背景 图 像 ， 不 平 铺 所 
padding-bottom:20px: /*# 增 加 第 2 段 底 部 内 边 距 ， 显 示 背 景 图像 */ 
background:url(1mages/night bottom.aif) bottom no-repeat:; 

} 

#explanation p span {* 定 义 段落 文本 左 侧 的 内 边 距 ， 以 便 显 示 左 侧 背 景 图 像 */ 
padding:0 1Spx 10px 77px:; 
display:block: 诺 定 义 块 状 显 示 ， 内 边 距 才 有 效 */ 
text-align:left: 诺 文 本 左 对 齐 */ 

} 

#explanation p .first { 话 定 义 首 字 下 沉 特效 */ 
font-size:60px: color:#820015:; line-height: lem: 话 字 体 显 示 属 性 */ 
float:left: 旋 癌 左 浮动 */ 
padding:0: 访 清 除 上 面 样式 为 段落 定义 的 内 边 距 */ 
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} 
</STYLE> 


在 上 面 的 样式 表 中 , 分 别 为 不 同 元 素 定 义 背 景 图 像 , 然后 通过 定位 技术 把 背景 图 像 定 位 到 对 应 的 


4 个 边 上 ， 并 根据 需要 运用 平 铺 技术 实现 圆 角 区 域 效果 。 
< 锯 注 意 : 百分比 是 最 灵活 的 定位 方式 ， 同 时 也 是 最 难 把 握 的 定位 单位 。 


在 默认 状态 下 ， 定 位 的 位 置 为 (0% 0% ) ， 定 位 点 是 背景 图 像 的 左上 顶点 ， 定 位 距离 是 该 
点 到 包含 框 左上 角 顶 点 的 距离 ， 即 两 点 重合 。 


如 果 定 位 背景 图 像 位 置 为 (100% 100% ) ， 则 定位 点 是 背景 图 像 的 右 下 顶点 ， 定 位 距离 是 


该 点 到 包含 框 左上 角 顶 点 的 距离 ， 这 个 距离 等 于 包含 框 的 宽度 和 高 度 。 


百分比 也 可 以 取 负 值 ， 负 值 的 定位 点 是 包含 框 的 左上 顶点 ， 而 定位 距离 则 由 图 像 自身 的 宽 ， 


和 高 来 决定 。 


CSS 还 提供 了 5 个 关键 字 : left、right、center、top 和 bottom。 这 些 关 键 字 实际 上 就 是 百分比 特 
殊 值 的 一 种 固定 用 法 。 详 细 列 表 说 明 如 下 : 


访 普 通用 法 */ 

top left、left top = 0% 0% 
right top、 top right = 100% 0% 
bottom left、left bottom = 0% 100% 
bottom right、right bottom = 100% 100% 
诺 居 中 用 法 */ 

center、 center center = $0% 3090 
放 特 殊 用 法 */ 

top、top center、center top = $0% 0% 
left、left center、center left = 0% $50% 
right、 right center、center right =100% S50% 
bottom、bottom center、center bottom = $50% 100% 


5.1.4 ”设置 固定 背景 


在 默认 情况 下 ,背景 图 像 能 够 跟随 网 页 内 容 上 下 深 动 。 可 以 使 用 background-attachment 属性 定义 | 
背景 图 像 在 窗口 内 固定 显示 ， 具 体 用 法 如 下 : 


background-attachment: fixed | local | scroll 


默认 值 为 scroll， 具 体 取 值 说 明 如 下 。 
加 ”fixed: 背景 图 像 相 对 于 浏览 器 窗 体 固定 。 


scroll: 背景 图 像 相 对 于 元 素 固 定 ， 也 就 是 说 当 元 素 内 容 滚 动 时 背景 图 像 不 会 跟着 滚动 , 因 ， 
为 背景 岁 像 总 是 要 跟着 元 素 本 身 。 
| 


local: 背景 图 像 相 对 于 元 素 内 容 固 定 ， 也 就 是 说 当 元 素 内 容 深 动 时 背景 图 像 也 会 跟 看 深 动 ， 
此 时 不 管 元 素 本 映 是 否 深 动 ， 当 元 素 显 示 深 动 条 时 才 会 看 到 效果 。 该 属性 值 仅 CSS3 支持 。 
【示例 】 在 下 面 的 示例 中 ， 为 <body> 标 签 设置 背景 图 片 ， 且 不 平 铺 、 固 定 ， 这 时 通过 拖 动 浏览 ， 
右 深 动 条 ， 可 以 看 到 网 员 内 容 在 深 动 ， 而 背景 图 片 静 止 显 示 。 页 面 演示 效果 如 图 5.4 所 示 。 
<style type="text/css"> 


body { 


。 107 。 


background-1mage: url(1mages/bg.jpe); 
background-repeat: no-repeat; 
backeground-position: left center: 
background-attachment: fixed:; 


Csss 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


/# 设 置 背景 图 片 %/ 
/* 背 景 图 片 不 平 铺 % 
背景 图 片 的 位 置 */ 
/* 背 景 图 片 固定 ， 不 随 滚动 条 滚动 而 滚动 %y/ 


height: 1200px: 上 # 高 度 ， 出 现 浏览 器 的 滚动 条 类 


} 

#box {float:right; width:400px:} 

</style> 

<div 1d="box"> 
<hl> 雨 巷 </h1> 
<h2> 戴 望 舒 </h2> 
<pre> 

撑 着 油纸 全 ， 独 自 

仿 香 在 修长、 悠长 

叉 和 名 容 的 雨 埠 ， 

我 希望 逢 着 

一 个 丁香 一 样 的 

结 着 愁 怨 的 姑娘 。 


ee 三 hap://localhost/mysit<jtcsthtm 


品 - 有 C | 登 m 靖 时 四 片 RE 六 > 
旭 衍 得 在 喜 家 的 璀 车， 
撑 着 油纸 伴 
像 我 一 样 ， 

像 我 一 样 地 
孜 玫 虽 蜡 着 
冷 章 、 浪 清 ， 双 翌 眶 。 


她 黑 卉 地 走 这 ， 
走 近 ， 叉 投 出 


栅 亚 这 
像 芭 一 般 闻 ， 
像 劳 一 般 地 姜 疡 壕 范 。 


翁 藉 中 强 过 
一 枝 丁 香 地 ， 

我 身 旁 结 过 这 个 女 即 ; 
她 静 时 地 远 了 , 远 了 ， 
到 了 莉 志 的 篇 撞 ， 
走 尽 这 雨 埠 。 


5.1.5 设置 定位 原点 


background-origin 属性 定义 background-position 属性 的 定位 原点 。 在 默认 情况 下 ，background- 
position 属性 总 是 以 元 素 左 上 角 为 坐标 原点 定位 背景 图 像 ， 使 用 background-origin 属性 可 以 改变 这 种 
定位 方式 。 该 属性 的 基本 语法 如 下 : 

background-origin: border-box | padding-box | content-box: 

取 值 简单 说 明 如 下 。 

border-box: 从 边框 区 域 开始 显示 背景 。 

padding-box: 从 补 白 区 域 开始 显示 背景 ， 为 默认 值 。 
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content-box: 仅 在 内 容 区 域 显示 背景 。 

【示例 】background-origin 属性 改善 了 背景 图 像 定 位 的 方式 ， 更 灵活 地 决定 背景 图 像 应 该 显示 的 
人 位置。 下面 示例 利用 background-origin 属性 重 设 背景 图 像 的 定位 坐标 ， 以 便 更 好 地 控制 背景 图 像 的 显 
示 ， 演 示 效 果 如 图 5.5 所 示 。 


口 Ilecalhost:9080/mysitc/ x WO 


@ © localhost:8080/mysite/test.html 


念 妈 娇 " 亦 壁 怀古 


苏轼 


雪 . 江山 如 画 ， 一 时 多 少 豪杰 。 


2 2 天 
证 相公 班 当年 ， 小 乔 初 嫉 了 ， 妈 这 英 发 。 羽 房 纶 巾 ， 谈 笑 间 ， 檀 模 如 飞 灰 。 帮 国术 游 ， 专 情 应 关 藉 必定 国有 
生 华 发 。 人 生 加 梦 ， 一 草 还 醋 江 月 。 ， 


图 5.5 设计 诗词 效果 
示例 代码 如 下 : 


<style type="text/css"> 
div {/* 定 义 包含 框 的 样式 */ 
height: 322px; 
width: 780px: 
border: solid 1px red: 
padding: 250px 4em 0; 
/# 为 了 避免 背景 图 像 重 复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 状 
background:url(1mages/p3.pg) no-repeat; 
谍 设 计 背 景 图 像 的 定位 坐标 点 为 元 素 边框 的 左上 角 */ 
background-origin:border-box: 
谍 将 背景 图 像 等 比 缩放 到 完全 禾 盖 包含 杠 ， 背 景 图 像 有 可 能 超出 包含 框 */ 


background-size:cover; 


overflow:hidden: 上 隐藏 超 出 包含 框 的 内 容 */ 
} 
divhl, divh21{ 上 定义 标题 样式 */ 
font-size:18px: font-family:" 幼 圆 ": 
text-align:center: /# 水 平 居中 显示 类 
} 
divp {定义 正文 样式 */ 
text-indent:2em: /# 首 行 缩 进 2 个 字符 */ 
line-height:2em: /# 增 大 行 高 ， 让 正文 看 起 来 更 疏 朗 关 
margin-bottom:2em: 旋 调 整 底部 边界 ， 增 大 段落 文本 距离 */ 


。 109。 


Csss 网 页 设计 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


</style> 
<div> 
<hl1> 念 奴 娇 &#8226: 赤 壁 怀古 </h1> 
<h2> 苏 轼 </h2> 
| <p> 大 江东 去 ， 浪 淘 尽 ， 千 古风 流 人 物 。 故 垒 西边 ， 人 道 是 ， 三 国 周 郎 赤 壁 。 乱 石 穿 空 ， 惊 涛 拍 岸 ， 卷 
起 千 堆 雪 。 江 山 如 画 ， 一 时 多 少 豪 杰 。</p> 


<p> 遥 想 公 刑 当年 ， 小 乔 初 嫁 了 ， 雄 姿 英 发 。 羽 肩 纶 巾 ， 谈 笑 间 ， 梢 构 灰 飞 烟 灭 。 故 国 神游 ， 多 情 应 笑 


”我 ,早生 华发 。 人 生 如 梦 ， 一 尊 还 酷 江 月 。</p> 
</div> 


5.1.6 设置 裁剪 区 域 


background-clip 属性 定义 背景 图 像 的 裁剪 区 域 。 该 属性 的 基本 语法 如 下 : 
background-clip:border-box | padding-box | content-box | text: 


取 值 简单 说 明 如 下 。 

border-box: 从 边框 区 域 癌 外 裁剪 背景 ， 为 默认 值 。 
四 ”padding-box: 从 补 白 区 域 癌 外 裁剪 背景 。 
content-box: 从 内 容 区 域 癌 外 裁剪 背景 。 

加 text: 从 前 景 内 容 〈 如 文字 ) 区 域 回 外 裁 间 背景 。 


会 提示 : 如 果 取 值 为 padding-box， 则 background-image 将 忽略 补 白 边缘 ， 此 时 边框 区 域 显 示 为 透明 。 
如 果 取 值 为 border-box， 则 background-image 将 包括 边框 区 域 。 
如 果 取 值 为 content-box， 则 background-image 将 只 包含 内 容 区 域 。 
如 果 background-image 属性 定义 了 多 重 背景 ， 则 background-clip 属性 值 可 以 设置 多 个 值 ， 
并 用 过 号 分 隔 。 
如 果 background-clip 属性 值 为 padding-box，background-origin 属性 值 为 border-box， 且 
background-position 属性 值 为 top left ( 默认 初始 值 ) ， 则 背 录 图 左上 角 将 会 被 截取 掉 部 分 。 


【示例 1】 下 面 示例 演示 如 何 设计 背景 图 像 仅 在 内 容 区 域内 显示 ， 演 示 效 果 如 图 5.6 所 示 。 


<style type="text/css"> 
dv { 
height: 1 SOpx; 
width:300px:; 
border:solid SOpx gray: 
padding:50px:; 
backeground:url(1mages/bg.jpg) no-Tepeat: 
放 将 背景 图 像 等 比 缩放 到 完全 徐 盖 包含 杠 ， 背 景 图 像 有 可 能 超出 包含 框 */ 
background-size:cover:; 
/# 将 背景 图 像 从 content 区 域 开 始 向 外 裁剪 背景 */ 
backeground-clip:content-box; 
} 
</style> 


<div></div> 
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x 
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5.6 以 内 容 边 缘 裁 切 背 景 图 像 效 果 
| 


【示例 2】 下 面 示例 同时 定义 background-clip 和 background-origin 属性 值 为 content， 可 以 设计 比 | 
较 特 殊 的 按钮 样式 ， 演 示 效 果 如 图 5.7 所 示 。 


<style type="text/css"> | 
button { | 
height:40px:; 诺 固 定 包 含 框 大 小 */ 
width: 150px:; | 
padding: 1px: 此 在 内 容 区 留 点 空 阶 */ 
cursor:pointer; 旋 定 义 手 形 指针 样式 */ | 
color:#fff: 诺 白 色 字 体 */ | 
诺 设 计 立 体 边框 样式 */ 
border:3px double #95071b: | 
border-right-color:#650513; 
border-bottom-color:#650513; | 


此 为 了 避免 背景 图 像 重 复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 */ | 
background:url(images/img6.jpg) no-repeat; | 
诺 设 计 背 景 图 像 的 定位 坐标 点 为 元 素 内 容 区 域 的 左上 和 角 */ | 


background-origin:content-box; | 
诺 设 计 背 景 图 像 以 内 容 区 域 的 边缘 裁 切 背景 图 像 */ | 
background-clip:content-box; | 
} / 
</style> | 


<button> 导 航 按钮 >></button> 


x 


* 全 [3 http://localhost/m DO» BO Ke localhost x 


图 5.7 设计 按钮 效果 | eb 

5.1.7 设置 背景 图 像 大 小 基 
background-size 可 以 控制 背景 图 像 的 显示 大 小 。 该 属性 的 基本 语法 如 下 : ”视频 讲解 
background-size: [<length> | <percentage> | auto|{1,2} | cover | contaln: 
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Ee& 
取 值 简单 说 明 如 下 。 


<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 。 
<percentage>: 取 值 范围 为 0 一 100%。 不 可 为 负 值 。 


| | cover: 保持 背景 图 像 本 喘 的 宽 高 比例 ， 将 图 片 缩放 到 正好 完全 禾 盖 所 定义 背景 的 区 域 。 

Pe 加 ”contain: 保持 图 像 本 号 的 宽 高 比例 ， 将 图 片 缩放 到 宽度 或 高 度 正好 适应 所 定义 背景 区 域 。 

vote 初始 值 为 auto。background-size 属性 可 以 设置 一 个 或 两 个 值 ， 一 个 为 必 填 ， 一 个 为 可 选 。 其 中 第 
1 工 个 值 用 于 指定 背景 图 像 的 width， 第 2 个 值 用 于 指定 背景 图 像 的 height， 如 果 只 设置 一 个 值 ， 则 第 2 
个 值 默 认为 auto。 


【示例 】 下 面 示例 使 用 background-size 属性 目 由 定制 背景 图 像 的 大 小 , 让 背景 图 像 自 适应 盒子 的 
] 大 小 ， 从 而 设计 与 模块 大 小 完全 适应 的 背景 图 像 ， 效 果 如 图 5.8 所 示 ， 只 要 背景 图 像 长 宽 比 与 元 素 长 
宽 比 相同 ， 就 不 用 担心 背景 图 像 变 形 显 示 。 


图 5.8 ”设计 背景 图 像 自 适应 显示 
示例 代码 如 下 : 


<style type="text/css"> 

dv { 
margin:2px; 
float:left: 
border:solid 1px red:; 
background:url(1mages/img2.jpg) no-repeat center:; 
虚设 计 背 景 图 像 完 全 徐 盖 元 素 区 域 */ 
background-size:cover:;} 

谍 设 计 元 素 大 小 */ 

.hl {height:80px; width:110px;} 

.h2 {height:400px:; width:550px:} 

</style> 

<div class="h1"></div> 

<div class="h2"></div> 


| CSS3 文 持 在 同一 个 元 素 内 定义 多 个 背景 图 像 ， 还 可 以 将 多 个 背景 图 像 进行 琶 加 显示 ， 从 而 使 得 
， 设 计 多 图 背景 栏目 变 得 更 加 容易 。 
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【示例 1】 本 例 使 用 CSS3 多 背景 设计 花边 框 ， 使 用 background-origin 属性 定义 仅 在 内 容 区 域 显 
示 痛 景 ， 使 用 background-clip 属性 定义 背景 从 边框 区 域 品 外 裁 弦 ， 如 图 5.9 所 示 。 | 


Xx 


Ge hep/ioca hoswryster PD ~ Bo 认 关 六 | 


示例 代码 如 下 : 


<style type="text/css"> | 
.demo { 
谍 设 计 元 素 大 小 、 补 白 、 边 框 样 式 ， 边 框 为 20px， 颜 色 与 背景 图 像 色 相同 */ 
width: 400px: padding: 30px 30px: border: 20px solid rgba(104, 104, 142,0.5); 
谍 定 义 圆 角 显示 */ 
border-radius: 10px: 
谍 定 义 字 体 显示 样式 */ | 
color: #f36: font-size: 80px: font-family:" 隶 书 ":line-height: 1.$; text-align: center: 
} | 
.multipleBg { | 
/# 定 义 $ 个 背景 图 ， 分 别 定位 到 4 个 项 角 ， 其 中 前 4 个 禁止 平 铺 ， 最 后 一 个 可 以 平 铺 */ | 
backsground: url("i1mages/bg-tl.png") no-repeat left top, | 
url("images/bg-tr.png") no-repeat right top， 
url("images/bg-bl.png") no-repeat left bottom, 
url("images/bg-br.png") no-repeat right bottom, 
url("images/bg-repeat.png") repeat left top: 
/* 改 变 背 景 图 像 的 position 原点 ，4 杂 花 都 是 border 原点 ， 而 平 铺 背 景 是 padding 原点 */ | 
| 


图 5.9 设计 花边 框 效果 | 
| 


background-origin: border-box, border-box, border-box, border-box, padding-box: 
谍 控 制 背景 图 像 的 显示 区 域 ， 所 有 背景 图 像 超 过 border 外 边缘 都 将 被 前 切 掉 */ 
background-clip: border-box:; | 
} | 
</style> 
<div class="demo multipleBg"> 恭 喜 发 财 </div> 


【示例 2】 在 下 面 示例 中 利用 CSS3 多 背景 图 功能 设计 圆 角 栏目 ， 效 果 如 图 5.10 所 示 。 


<style type="text/css"> 
.Toundbox { 
padding: 2em; | 
谍 为 容器 定义 8 个 背景 图 像 */ | 
background-1mage: url(1mages/roundbox1/tl.g1f), 
url(images/roundbox1/tr.gif), 
url(images/roundbox1/bl.gif), | 
url(images/roundbox /br.g1f), 
url(images/roundbox] /night. gif), 
url(images/roundbox1/left.g1if), 人 
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url(images/roundbox1]/top.gif), 
url(1mages/roundbox1/bottom.gif); 
/# 定 义 4 个 顶 角 图 像 禁止 平 铺 ，4 个 边框 图 像 分 别 沿 x 轴 或 y 轴 平 铺 */ 
background-repeat: no-repeat, 
no-repeat, 
no-repeat, 
no-repeat, 
repeat-y, 
repeat-y, 
repeat-x, 
repeat-x,; 
谍 定 义 4 个 顶 角 图 像 分 别 固定 在 4 个 顶 角 位 置 ，4 个 边框 图 像 分 别 固定 在 四 边 位 置 */ 
backeground-position: left Opx, 
right Opx, 
left bottom, 
right bottom, 
right Opx, 
Opx Opx, 
left Opx, 
left bottom: 
background-color: #66CC33; 
} 
</style> 
<div class="roundbox"> 
<h1> 念 奴 娇 &#8226; 赤 壁 怀古 </h1> 
<h2> 苏 轼 </h2> 
<p> 大 江东 去 ， 浪 淘 尽 ,千古 风流 人 物 。 故 侄 西 边 ， 人 道 是， 三 国 周 郎 赤 壁 。 乱 石 窒 空 ， 惊 涛 拍 岸 ， 卷 


”起 千 堆 雪 。 江 山 如 画 ， 一 时 多 少 豪杰 。</p> 


<p> 遥 想 公 瑾 当年 ， 小 乔 初 媒 了 ， 雄 姿 员 发 。 羽 而 纶 巾 ， 谈 舌 间 ， 栖 楷 灰 飞 烟 灭 。 故 国 神游 ， 多 情 应 突 


”我 ， 早 生 华发 。 人 生 如 梦 ， 一 尊 还 酷 江 月 。</p> 


</div> 


eC 2 "| 钴 http:j/localhost:8080/jmysite/jtest2.htm 


图 5.10 定义 多 背景 图 像 


< 注意 : 每 幅 背 景 图 像 的 源 、 定 位 坐标 以 及 平 铺 方式 的 先后 顺序 要 一 一 对 应 . 


会 提示 : 上 面 示例 用 到 了 background-image、background-repeat 和 background-position 多 个 背 录 属 
性 。 这 些 属性 都 是 CSS1 中 就 有 的 属性 ， 但 是 在 CSS3 中 ， 人 允许 同 时 指定 多 个 属性 值 ， 多 
个 属性 值 以 过 号 作为 分 隔 符 ， 用 来 指定 多 个 背景 图 像 的 显示 性 质 。 
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5.2 设计 渐变 背景 


W3C 于 2010 年 11 月 正式 支持 渐变 背景 样式 ， 该 草案 作为 图 像 值 和 图 像 蔡 换 内 容 横 块 的 一 部 分 | 
进行 发 布 ， 主 要 包括 linear-gradient()、radial-gradient()、 eo repeating-rad1ial- 


gradient( 4 个 渐变 函数 。 
权威 参考 : http://dev.w3.org/csswg/css3-images/#gradients。 


5.2.1 定义 线性 渐变 1 


创建 一 个 线性 渐变 至 少 需要 两 个 颜色 , 也 可 以 选择 设置 一 个 起 点 或 一 个 方向 。 简 明 语法 格式 如 下 : 


linear-gradient(angle, color-stop1, color-stop2, ...) 
参数 简单 说 明 如 下 。 
angle: 用 来 指定 渐变 的 方向 ， 可 以 使 用 角度 或 者 关键 字 来 设置 。4 个 关键 字 说 明 如 下 。 
> to left: 设置 渐变 从 右 到 左 ， 相 当 于 270deg。 
> to right: 设置 渐变 从 左 到 右 ， 相 当 于 90deg 
> to top: 设置 渐变 从 下 到 上 ， 相 当 于 0deg 
> to bottom: 设置 渐变 从 上 到 下 ， 相 当 于 180deg。 该 值 为 默认 值 。 


会 提示 : 如 果 创建 对 角 线 渐变 ， 可 以 使 用 to top left (从 右 下 到 左上 ) 类 似 组 合 来 实现 。 


color-stop: 用 于 指定 渐变 的 色 点 ， 包 括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 空 
格 分 隅 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 〈 不 可 为 负 值 ) ， 也 可 以 是 一 个 百分比 值 ， 如 果 
是 百分比 值 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 

【示例 1】 下 面 示例 为 <div id="demo"> 对 象 应 用 了 一 个 简单 的 线性 渐变 背景 ， 方 同 从 上 到 下 ， 颜 
色 由 日 色 到 浅 灰 渐变 显示 ， 效 果 如 图 5.11 所 示 。 

<style type="text/css"> | 

#demo { 
width:300px:; 
height:200px;: 
background: linear-gradient(#fff, #333): 


} 
</style> 
<div 1d="demo"></div> 


图 5.11 应 用 简单 的 线性 渐变 效果 
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， 舍 提 示 : 针对 示例 1， 用 户 可 以 继续 尝试 做 下 面 练习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 效果 。 


加 设置 一 个 方向 : 从 上 到 下 ， 履 盖 默 认 值 。 
linear-gradient(to bottom, #fff, #333); 

回 设置 反 向 渐变 : 从 下 到 上 ， 同 时 调整 起 止 颜色 位 置 。 
linear-gradient(to top, #333, 失 的 ; 

回 使 用 角度 值 设置 方向 。 

linear-gradient(180deg, #fff, #333); 

回 ”明确 起 止 磊 色 的 具体 位 置 ， 和 覆盖 默认 值 。 
linear-gradient(to bottom, #fff 0%, #333 100%); 


【拓展 】 
最 新 主流 浏览 器 都 支持 线性 渐变 的 标准 用 法 , 但 是 考虑 到 安全 性 ,用户 应 酌情 兼容 旧版 本 浏览 


”的 私有 属性 。 


Webkit 是 第 一 个 支持 渐变 的 浏览 器 引擎 (Safari 4+)， 它 使 用 -webkit-gradientO0 私 有 函数 文 持 线性 
渐变 样式 ， 简 明 用 法 如 下 : 
-webkit-gradient(linear, point, point, stop) 


参数 简单 说 明 如 下 。 
回 linear: 定义 渐变 类 型 为 线性 渐变 。 
point: 定义 渐变 起 始点 和 结束 点 坐标 。 该 参数 支持 数值 、 百 分 比值 和 关键 字 ， 如 (0 0) 或 者 (left 
top) 和 等。 关键 字 包 括 top、bottom、left 和 right。 
回 stop: 定义 渐变 色 和 步 长 。 包 括 3 个 值 ， 即 开始 的 颜色 ， 使 用 from(colorvalue) 函 数 定义 ; 结 
束 的 颜色 ,使 用 to(colorvalue) 函 数 定义 ; 颜色 步 长 ， 使 用 color-stop(value, color Vvalue) 函 数 定 
义 。color-stop0) 函 数 包含 两 个 参数 值 ， 第 一 个 参数 值 为 一 个 数值 或 者 百分比 值 ， 取 值 范 围 为 
0 一 1.0 (或 者 0% 一 100%) ， 第 二 个 参数 值 表示 任意 颜色 值 。 
【示例 2】 下 面 示例 针对 示例 1， 兼 容 早 期 Webkit 引擎 的 线性 渐变 实现 方法 。 
#demo { 
width:300px:; height:200px; 
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#333)); 
background: linear-gradient(#fff, #333): 
} 
上 面 示例 定义 线性 渐变 背景 色 ， 从 顶部 到 底部 ， 从 白色 回 浅 灰色 渐变 显示 ， 在 谷歌 的 Chrome 浏 
贤 器 中 所 见效 果 与 图 5.11 相同 。 
男 外 ，Webkit 引擎 也 文 持 -webkit-linear-gradient0 私 有 函数 来 设计 线性 渐变 。 该 函数 用 法 与 标准 函 


” 数 linear-gradient0 语 法 格式 基本 相同 。 


Firefox 浏览 器 从 3.6 版 本 开始 文 持 渐变 ，Gecko 引擎 定义 了 -moz-linear-gradient() 私 有 函数 来 设计 


”线性 渐变 。 该 函数 用 法 与 标准 函数 linear-gradientO 语 法 格式 基本 相同 。 唯 一 区 别 是 ， 当 使 用 关键 字 设 
， 置 渐变 方 同 时 ， 不 带 to 关键 字 前 缀 ， 关 键 字 语义 取 反 。 例 如 ， 从 上 到 下 应 用 渐变 ， 标 准 关 键 字 为 to 
”bottom，Firefox 私有 属性 可 以 为 top。 


【示例 3】 下 面 示 例 针 对 示例 1， 兼 容 早期 Gecko 引擎 的 线性 渐变 实现 方法 。 
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#demo { 
width:300px; height:200px; 
backeground: -webkit-gradient(linear, left top, left bottom, from(#f{ff), to(#333)); 
background: -moz-linear-gradient(top, #fff., #333); 
background: linear-gradient(#fff, #333): 
} 


5.2.2 ”设计 线性 渐变 样式 


本 节 以 示例 形式 介绍 线性 渐变 中 渐变 方向 和 色 点 的 设置 ， 演 示 设 计 线 性 渐变 的 一 般 方法 。 
【示例 1】 下 面 示例 演示 了 从 左边 开始 的 线性 渐变 。 起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 《〈 可 扫描 本 书 
“视频 讲解 ”二 维 码 查看 颜色 效果 ， 后 面 不 再 一 一 标注 )， 效 果 如 图 5.12 所 示 。 


<style type="text/css"> 


#demo { 
width:300px;:; height:200px:; 
backeround: -webkit-linear-gradient(left, red , blue): /*Safari $.1 - 6.0*/ 
backsground: -o-linear-gradient(left, red, blue): /*Opera 11.1 - 12.0*/ 
backeround: -moz-linear-gradient(left, red, blue): /*Firefox 3.6 - 15*/ 
background: linear-gradient(to right, red , blue): /# 标 准 语法 #/ 

} 

</style> 


<div 1d="demo"></div> 
< 全 注意 : 第 一 个 参数 值 渐变 方向 的 设置 不 同 。 


【示例 2】 通 过 指定 水 平和 垂直 的 起 始 位 置 来 设计 对 角 渐 变 。 下 面 示例 演示 了 从 左上 角 到 右 下 角 


的 线性 渐变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 5.13 所 示 。 


#demo { 
width:300px; height:200px; 
background: -webkit-linear-gradient(left top, red , blue);  /*Safari$.] - 6.0*/ 
backeground: -o-linear-gradient(left top, red, blue); /*Opera 11.1 - 12.0*/ 


backeround: -moz-linear-gradient(left top, red, blue): /*Firefox 3.6 - 15*/ 
background: linear-gradient(to bottom right, red , blue); ” /* 标 准 语法 */ 


localhost8080/mysite/” xX localhost:8080/mysite/t X 


(D localhost:8080 四 吕 CGC |» 三 € 0 localhcst8080 园 照 G | 


图 5.12 设计 从 左 到 右 的 线性 渐变 效果 图 5.13 设计 对 角 线 性 渐变 效果 


【示例 3】 通 过 指定 具体 的 角度 值 ， 可 以 设计 更 多 渐变 方向 。 下 面 示例 演示 了 从 上 到 下 的 线性 渐 


变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 5.14 所 示 。 


w 


\、 
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#demo { 
WwWldth:300px: height:200px:; 
background: -webkit-linear-eradient(-90deg, red, blue); /*Safari $.1 - 6.0*/ 
background: -o-linear-gradient(-90deg, red, blue); /*Opera 11.1 - 12.0*/ 
background: -moz-linear-gradient(-90deg, red, blue); /*Firefox 3.6 - 15*/ 
background: linear-gradient(180deg, red, blue): 上 诺 标 准 语 法 */ 

} 

【补充 】 


渐变 角度 是 指 垂直 线 和 渐变 线 之 间 的 角度 ， 逆 时 针 方 同 计算 。 例 如 ，0deg 将 创建 一 个 从 下 到 上 


”的 渐变 ，90deg 将 创建 一 个 从 左 到 右 的 渐变 。 注 意 ， 渐 变 起 点 以 -y 轴 为 参考 。 


但 是 ， 很 多 浏览 器 (如 Chrome、Safari1、Firefox 等 ) 使 用 旧 的 标准 : 渐变 角度 是 指 水 平 线 和 渐变 


” 线 之 间 的 角度 ， 首 时针 方 向 计算 。 例 如 ，0deg 将 创建 一 个 从 左 到 右 的 渐变 ，90deg 将 创建 一 个 从 下 到 
上 的 渐变 。 注 意 ， 渐 变 起 点 以 -x 轴 为 参考 。 


兼容 公式 : 
90-x=y 


其 中 ，x 为 标准 角度 ，y 为 非 标准 角度 。 
【示例 4】 设 置 多 个 色 点 。 下 面 示例 定义 从 上 到 下 的 线性 渐变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 绿色 ， 


”再 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 5.15 所 示 。 


#demo { 
width:300px;:; height:200px; 
backsground: -webkit-linear-gradient(red, green, blue); /*Safari $.] - 6.0*/ 
background: -o-linear-gradient(red, green, blue): /*Opera 11.1 - 12.0*/ 
background: -moz-linear-gradient(red, green, blue); /*Firefox 3.6 - 15*/ 
background: linear-gradient(red, green, blue); 上 谍 标 准 语法 */ 

} 


L localhost8080 比 Se 
localhost8080/mysit” X Ee TE 


和 |) 四 localhost8080 思 跟 @ » 三 


© localhost8080/mys 加 Cc » 三 


图 5.14 设计 从 上 到 下 的 渐变 效果 图 $.1$ 设计 多 色 线 性 渐变 效果 
【示例 S】 设 置 色 点 位 置 。 下 面 示例 定义 从 上 到 下 的 线性 渐变 ， 起 点 是 黄色 ， 人 快速 过 渡 到 蓝 色 ， 


”再 慢 慢 过 渡 到 绿色 ， 效 果 如 图 5 16 所 示 。 


#demo { 
width:300px; height:200px; 
background: -webkit-linear-gradient(yellow, blue 20%, #0f0); /*Safari $5.1 - 6.0*/ 
backeground: -o-linear-gradient(yellow, blue 20%, #0f0): /*Opera 11.1 - 12.0*/ 
background: -moz-linear-gradient(yellow, blue 20%, #0f0): /*Firefox 3.6 - 15*/ 
background: linear-gradient(yellow, blue 20%, #0f0): /# 标 准 语法 部/ 

} 


上 
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【示例 6】CSS3 浙 变 文 持 透明 度 设置 ， 可 用 于 创建 减弱 变 淡 的 效果 。 下 面 示例 演示 了 从 左边 开 
始 的 线性 渐变 。 起 点 是 完全 透明 ， 起 点 位 置 为 30%， 慢 慢 过 渡 到 完全 不 透明 的 红色 ,为 了 更 清晰 地 看 


到 半 透 明 效 果 ， 示 例 增加 了 一 层 育 景 图 像 进行 衬托 ， 演 示 效 果 如 图 5.17 所 示 。 


#demo { 
width:300px;:; height:200px:; 
/*Safari $.1 - 6*/ 
backeground: -webkit-linear-gradient(left,rgba(255,0,0,0) 30%,rgba(255,0,0,1)),url(images/bg.jpe); 
/*Opera 11.1 - 12*/ 
background: -o-linear-gradient(left,rgba(255,0,0,0) 30%,rgba(255,0,0,1)),url(1mages/bg.jpe); 
/*Firefox 3.6 - 15*/ 
backeround: -moz-linear-gradient(left.rgba(255,0,0,0) 30%,rgba(255,0,0,1)).url(images/bg.jpe); 


诺 标 准 语法 */ 
backeground: linear-egradient(to right, rgba(255,0.,0,0) 30%, reba(255,0,0,1)),url(images/bg.jpe); 
background-size:cover:; /#* 背 景 图 像 完 全 覆盖 类 


localhost:8080/mysita/t XX localhost:8080/mysit=t X 


€ 四 0/mysite/tet5htmlT 加 路 CG 所 DO localhost:8080 


图 5.16 设计 多 色 线 性 渐变 效果 图 5.17 ”设计 半 透 明 线性 渐变 效果 


窑 提示 : 为 了 添加 透明 度 ， 可 以 使 用 rgba() 或 hsla0 函 数 来 定义 色 点 。Tgba0 或 hsla0) 函 数 中 最 后 一 


个 参数 可 以 是 0~1 的 值 ， 它 定义 了 颜色 的 透明 度 : 0 表示 完全 透明 ，1 表示 完全 不 透明 。 


5.2.3 案例 : 设计 网 页 渐变 色 


为 页 面 设 计 渐变 背景 ， 可 以 营造 特殊 的 浏览 气氛 。 本 例 主要 代码 如 下 所 示 ， 预 览 效 果 如 图 5.18 ， 


所 示 。 

<style type="text/css"> 

body { * 让 浙 变 背景 填 满 整 个 页 面 */ 
padding: lem; 
margin: 0: 
backeground: -webkit-linear-gradient(#F F6666, #f{f{ff); /*Safari $.1 - 6.0*/ 
background: -o-linear-gradient(#FF6666, #f{fff); /*Opera 11.1 - 12.0*/ 
backeground: -moz-linear-gradient(#FF6666, #ffffF): /*Firefox 3.6 - 15*/ 
background: linear-gradient(#FF6666, #fffff): /# 标 准 语法 如 


/#IE 滤 镜 ， 兼 容 正 9- 版 本 浏览 器 */ 
filter: progid:DXImageTransform.Microsoft.Gradient(gradient Type=0, startColorSt=#FF6666, endColorStr 一 At: 


} 
hl {/* 定 义 标题 样式 */ 


“1 
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color: white: 

font-size: 18px; 

height: 4Spx: 

padding-left: 3em: 

line-height: 50px: 诺 控 制 文本 显示 位 置 */ 
border-bottom: solid 2px red; 

background: url(images/pel.png) no-repeat left center: 。 /为 标题 插入 一 个 装饰 图 标 */ 


Pp { text-indent: 2em; }/# 段 落 文本 缩 进 2 个 字符 */ 
</style> 
<div class="box'"> 
<hl>W3C 发 布 HIMLS 的 正式 推荐 标准 </h1> 
<p>2014 年 10 月 28 日 ，W3C 的 HIML 工作 组 正式 发 布 了 HIMLS 的 正式 推荐 标准 (W3C 
Recommendation)。W3C 在 美国 对 克拉 拉 举行 的 W3C 技术 大 会 及 顾问 委员 会 会 议 (TPAC 2014) 上 宣布 了 这 一 
消息 。 HIMLS 是 万 维 网 的 核心 语言 一 一 可 扩展 标记 语言 的 第 5 版 。 在 这 一 版 本 中 ， 增 加 了 支持 Web 应 用 开发 
者 的 许多 新 特性 ， 以 及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 关注 定义 清晰 的 、 一 致 的 准则 ， 以 确保 Web 应 
用 和 内 容 在 不 同 用 户 代 理 (浏览 器 ) 中 的 互 操作 性 。HIMLS 是 构建 开放 Web 平台 的 核心 。</p> 
<p class="right"> 更 多 <a hre 人 ="http://www.chinaw3c.org/archives/677/" target=" blank"> 详 细 内 容 </a></p> 
</div> 
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I CIFAC VIR} J IMR 下 UDPE 交口 四 了 要 
下 人 全 1 还 实 抽 入 < 有 7 十 用 于 


， 并 重点 关注 定义 


发 才 表 许多 新 特性 ， 
清晰 的 、 一 到 的 准则 ， 以 祝 保 Wb 应 书 和 内 容 在 不 同 用 户 代理 《 测 攻 器 中 
的 互 操 帮 性 。HTML 是 构建 开放 Web 平 台 的 核心。 


更 多 详细 内 容 


图 5.18 ”设计 渐变 网 页 背景 色 效果 


【补充 】 
IE 早期 版 本 不 文 持 CSS 渐变 ， 但 提供 了 渐变 滤 锐 ， 可 以 实现 简单 的 渐变 效果 。 正 浏览 器 渐变 滤 
镜 的 基本 语法 说 明 如 下 : 
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=1Width,endColorStr=1Width) 


该 函数 的 参数 说 明 如 下 。 
enabled: 设置 或 检索 滤 镜 是 否 激 活 。 可 选 布尔 值 ， 包 括 true 和 false， 默认 值 为 tue， 即 激活 


startColorStr: 设置 或 检索 色彩 渐变 的 开始 颜色 和 和 透明度。 可 选项 ， 其 格式 为 #AARRGGBB。 
AA、RR、GG、BB 为 十 六 进 制 正 整数 ， 取 值 范 围 为 00 一 FF。RR 指定 红色 值 ，GG 指定 绿 
色 值 ，BB 指定 蓝 色 值 。AA 指定 透明 度 ，00 是 完全 透明 ，FF 是 完全 不 透明 。 超 出 取 值 范围 
的 值 将 被 恢复 为 默认 值 。 取 值 范围 为 性 F000000 一 证 FFFFFFF， 默 认 值 为 钼 F0000FF， 即 不 
透明 蓝 色 。 

endColorStr: 设置 或 检索 色彩 渐变 的 结束 颜色 和 透明 度 。 默 认 值 为 性 F000000， 即 不 透明 黑色 。 
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< 所 注意 : IE 渐变 滤 镜 在 IE 5.5 及 其 以 上 版 本 浏览 器 中 有 效 。 
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、 、 D | 天 人 : 
5.2.4 案例 : 设计 条 纹 背 景 a 
如 果 多 个 色 点 设置 为 相同 的 起 点 位 置 ,它们 将 产生 从 一 种 颜色 到 另 一 种 颜色 的 急剧 转换 。 从 效果 会 
来 看 ， 就 是 从 一 种 颜色 突然 改变 到 另 一 种 颜色 ， 这 样 可 以 设计 条 纹 背景 效果 。 一 一 
【示例 1】 定 义 一 个 简单 的 条 纹 背景 ， 效 果 如 图 5.19 所 示 。 
<style type="text/css"> | 
#demo { 
height:200px; | 
background: linear-gradient(#cd6600 50%, #0067cd 50%): 
} 
</style> | 


<div 1d="demo"></div> 


【示例 2】 利 用 背景 的 重复 机 制 ， 可 以 创造 出 更 多 的 条 纹 。 示 例 代码 如 下 所 示 ， 效 果 如 图 5.20 / 
所 示 。 这 样 就 可 以 将 整个 背景 划分 为 10 个 条 纹 ， 每 个 条 纹 的 高 度 一 样 。 | 


#demo { 
height:200px:; | 
background: linear-gradient(#cd6600 50%, #0067cd $50%): 
background-size: 100% 2094: 话 定 义 单个 条 纹 仅 显 示 高 度 的 五 分 之 一 */ 
} 


Xx Xx 
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图 5.19 ”设计 简单 的 条 纹 效 果 图 5.20 ”设计 重复 显示 的 条 纹 效果 


【示例 3】 如 果 设 计 每 个 条 纹 高 度 不 同 ， 只 要 改变 比例 即 可 。 示 例 代码 如 下 所 示 ， 效 果 如 图 5.21 ， 
所 示 。 | 


#demo { 
height:200px: | 
background: linear-gradient(#cd6600 80%, #0067cd 0%): ”/* 定 义 每 个 条 纹 位 置 占 比 不 同 */ 
background-size: 100% 20%; /# 定 义 单个 条 纹 仅 显示 高 度 的 五 分 之 一 阁 

} | 

【示例 4】 设 计 多 色 条 纹 背景 ， 代 码 如 下 所 示 ， 效 果 如 图 5.22 所 示 。 

#demo { 

helght:200pxX: 


* 定 义 三 色 同 宽 背 景 */ 
background: linear-gradient(#cd6600 33.3%, #0067cd 0, #0067cd 66.6%, #00cd66 0); 
backeground-size: 100% 30px: 
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图 5.21 设计 不 同 高 度 的 条 纹 效果 图 5.22 ”设计 多 色 条 纹 效果 
【示例 5】 设 计 密集 条 纹 格 效果 ， 代 码 如 下 所 示 ， 效 果 如 图 5.23 所 示 。 
| #demo { 
| height:200px; 


background: linear-gradient(rgba(0,0,0,.5) 1px, #f{ff 1px); 
background-size: 100% 3px; 
} 


< 所 注意 : IE 不 支持 这 种 设计 效果 。 
【示例 6】 设 计生 直 条 纹 背 景 ， 只 需要 转换 一 下 宽 和 高 的 设置 方式 ， 具 体 代 码 如 下 所 示 ， 效 果 如 
图 5.24 所 示 。 


#demo { 

| helght:200px: 

background: linear-gradient(to right, #cd6600 50%, #0067cd 0): 
background-size: 20% 100%; 


DD lecalhost8080Jmysite/ x 昌明 


Cc | Q localhost:8080/mysite/test5.html| 


| 图 5.23 设计 密集 条 纹 效 果 图 5.24 ”设计 垂直 条 纹 效果 
| 【示例 7】 设 计 简单 的 纹理 背景 ， 代 码 如 下 所 示 ， 效 果 如 图 5.25 所 示 。 

] #demo { 

height:200px: 


background: linear-gradient(45deg, RGBA(0,103,205,0.2) 50%, RGBA(0,103,205,0.1) 50%); 
background-size: SOpx SO0px; 

| } 

” 窑 提 示 : 在 实际 应 用 中 ， 不 建议 使 用 太 多 的 背景 颜色 ,一 般 可 以 考虑 使 用 一 种 背景 色 ， 并 在 这 个 上 
色 的 深浅 上 设计 变化 。 
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图 5.25 设计 简单 的 纹理 效果 


5.2.5 定义 重复 线性 渐变 


使 用 repeating-linear-gradientO 国 数 可 以 定义 重复 线性 渐变 ， 用 法 与 linear-gradient() 函 数 相 同 ， 用 ， 
户 可 以 参考 5.2.1 节 说 明 。 | 


会 提示 : 使 用 重复 线性 渐变 的 关键 是 要 定义 好 色 点 ,让 最 后 一 个 颜色 和 第 一 个 颜色 能 够 很 好 地 连接 ， 
起 来 ， 处 理 不 当 将 导致 磊 色 的 急剧 变化 。 | 


【示例 1】 下 面 示 例 设 计 重 复 显 示 的 垂直 线性 渐变 ， 颜 色 从 红色 到 蓝 色 ， 间 距 为 20%， 效 果 如 ， 
图 5.26 所 示 。 
<style type="text/css"> 
#demo { 
height:200px; 
background: repeating-linear-gradient(#{00, #00f 20%, #f00 40%); 
} | 
</style> 
<div 1d="demo"></div> 


会 提示 : 使 用 linear-gradient0 可 以 设计 repeating-linear-gradient0 的 效果 。 例如， 通过 重复 设计 每 一 

个 色 点 或 者 利用 5.2.4 节 设 计 条 纹 的 方法 来 实现 。 

【示例 2】 下 面 示例 设计 重复 线性 渐变 对 角 显 示 ， 效 果 如 图 5.27 所 示 。 
#demo { 


height:200px; 
background: repeating-linear-gradient(135deg, #cd6600, #0067cd 20px, #cd6600 40px); 


x 


CE -8 hp/ocahort: -ac A A VE -8 honocahoett -sc 


图 5.26 设计 重复 显示 的 垂直 渐变 效果 图 5.27 设计 重复 显示 的 对 角 渐 变 效果 
【示例 3】 下 面 示 例 使 用 重复 线性 渐变 创建 出 对 角 条 纹 背 景 ， 效 果 如 图 5.28 所 示 。 L 
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#demo { 
height:200px; 
backeround: repeating-linear-gradient(60deg, #cd6600, #cd6600 5%, #0067cd 0, #0067cd 10%): 
2 
pn 4 [EET Cr | ” 


图 5.28 设计 重复 显示 的 对 角 条 纹 效果 


5.2.6 ”定义 径 向 渐变 


创建 一 个 径 同 渐变 ， 也 至 少 需要 定义 两 个 颜色 ， 同 时 可 以 指定 渐变 的 中 心 点 位 置 、 形 状 类 型 〈 圆 
形 或 椭圆 形 ) 和 半径 大 小 。 简 明 语法 格式 如 下 : 

radial-gradient(shape size at position, color-stop1, color-stop2, ...); 

参数 简单 说 明 如 下 。 

困 ”shape: 用 来 指定 渐变 的 类 型 ， 包 括 circle( 圆 形 ) 和 ellipse《〈 椭 圆 ) 两 种 。 

回 size: 如 果 类 型 为 circle， 指 定 一 个 值 设 置 圆 的 半径 ; 如果 类 型 为 ellipse， 指 定 两 个 值 分 别 设 
置 椭圆 的 x 轴 和 y 轴 半 径 。 取 值 包 括 长 度 值 、 百 分 比 、 关 键 字 。 关 键 字 说 明 如 下 。 
> closest-side: 指定 径 回 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 边 。 
> closest-comer: 指定 径 同 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 角 。 
> ”farthest-side: 指定 径 同 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 边 。 
> farthest-corner: 指定 径 同 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 角 。 

加 “position: 用 来 指定 中 心 点 的 位 置 。 如 果 提 供 两 个 参数 ， 第 一 个 表示 x 轴 坐 标 ， 第 二 个 表示 y 
轴 坐 标 ; 如 果 只 提供 一 个 值 ， 第 二 个 值 默 认为 S0%， 即 center。 取 值 可 以 是 长 度 值 、 百 分 比 
或 者 关键 字 ， 关 键 字 包括 left( 左 侧 ) 、center (中 心 ) 、right( 右 侧 ) 、top《〈 顶 部 ) 、center 
(中 心 ) 、bottom《〈 底 部 ) 。 


< 人身 注意 : position 值 位 于 shape 和 size 值 后 面 。 


四。 color-stop: 用 于 指定 渐变 的 色 上 点。 包括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 空 
格 分 隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 〈 不 可 为 负 值 ) ， 也 可 以 是 一 个 百分比 值 ， 如 果 
是 百分比 值 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 

【示例 1]】 在 默认 情况 下 ,渐变 的 中 心 是 center( 对 象 中 心 点 ), 渐变 的 形状 是 ellipse (椭圆 形 )， 
渐变 的 大 小 是 farthest-corner 〈 表 示 到 最 远 的 角落 )。 下 面 示 例 仅 为 radial-gradient0 函 数 设 置 3 个 颜色 
值 ， 则 它 将 按 默 认 值 绘制 径 同 渐变 效果 ， 如 图 5.29 所 示 。 

<style type="text/css"> 


#demo { 
height:200px; 


backeground: -webkit-radial-gradient(red, green, blue); /*Safari $.1 - 6.0*/ 
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background: -o-radial-gradient(red, green, blue); /*Opera 11.6 - 12.0*/ 
backeground: -moz-radial-gradient(red, green, blue): /*Firefox 3.6 - 15*/ 
backeground: radial-gradient(red, green, blue): /# 标 准 语法 并/ 

} 

</style> 


<div 1d="demo"></div> 
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图 5.29 ”设计 简单 的 径 向 渐变 效果 


会 提示 : 针对 示例 1， 用 户 可 以 继续 尝试 做 下 面 练习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 效果 . 
回 设置 径 向 渐变 形状 类 型 ， 默 认 值 为 ellipse。 
background: radial-gradient(ellipse, red, green, blue); 
回 设置 径 向 渐变 中 心 点 坐标 ， 默 认为 对 象 中 心 点 。 
background: radial-gradient(ellipse at center 50%, red, green, blue); 
回 设置 径 向 渐变 大 小 ， 这 里 定义 填充 整个 对 象 。 
backeground: radial-gradient(farthest-corner, red, green, blue): 
【拓展 】 
最 新 主流 浏览 器 都 支持 径 同 渐变 的 标准 用 法 , 但 是 考虑 到 安全 性 ， 用 户 应 酌情 兼容 旧版 本 浏览 
的 私有 属性 。 
Webkit 引擎 使 用 -webkit-gradientO 私 有 函数 支持 径 同 渐变 样式 ， 简 明 用 法 如 下 : 
-webkit-gradient(radial, point, radius, stop) 
参数 简单 说 明 如 下 。 
加 ”radial: 定义 渐变 类 型 为 径 同 渐变 。 


回 “point: 定义 渐变 中 心 点 坐标 。 该 参数 支持 数值 、 百 分 比值 和 关键 字 ， 如 (0 0) 或 者 (left top) 等 。 | 


关键 字 包 括 top、bottom、center、left 和 right。 
加 radius: 设置 径 同 渐变 的 长 度 ， 该 参数 为 一 个 数值 。 


回 stop: 定义 渐变 色 和 步 长 。 包 括 3 个 值 ， 即 开始 的 颜色 ， 使 用 from(colorvalue) 函 数 定 义 ; 结 ， 
束 的 颜色 ,使 用 to(colorvalue) 函 数 定义 ; 颜色 步 长 ， 使 用 color-stop(value, color value) 函 数 定 ， 
义 。color-stopO 函 数 包 含 两 个 参数 值 ， 第 一 个 参数 值 为 一 个 数值 或 者 百分比 值 ， 取 值 范 围 为 


0 一 1.0 (或 者 0% 一 100%) ， 第 二 个 参数 值 表示 任意 颜色 值 。 


【示例 2】 下 面 示例 设计 一 个 红色 圆 球 ， 并 逐步 径 同 渐变 为 绿色 背景 ,兼容 早期 Webkit 引擎 的 线 ， 


性 渐变 实现 方法 。 代 人 码 如 下 所 示 ， 演 示 效 果 如 图 5.30 所 示 。 


<style type="text/css"> 
#demo { 


* 125。 
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helght:200px: 

/#*Webkit 引擎 私有 用 法 */ 

backsground: -webkit-gradient(radial, center center, 0, center center, 100, fiom(red), to(green)); 
backeground: radial-gradient(circle 100px, red, green); 诺 标 准 的 用 法 */ 


伍 兢 } 


</style> 


Note | 


DD localhost8080/mysite, x 最 时 


C | © localhost:8080/mysite/test2.html 


图 5.30 ”设计 径 癌 圆 球 效 果 
男 外 ，Webkit 引擎 也 支持 -webkit-radial-gradient0 私 有 函数 来 设计 径 辣 渐变 。 该 函数 用 法 与 标准 函 
， 数 radial-gradientO 语 法 格式 类 似 。 简 明 语法 格式 如 下 : 
-webkit-radial-gradient(position, shape size, color-stop1, color-stop2, ...); 
Gecko 引擎 定义 了 -moz-radial-gradientO0 私 有 函数 来 设计 径 同 渐变 。 该 函数 用 法 与 标准 函数 
radial-gradientO 语 法 格式 也 类 似 。 傈 明 语 法 格式 如 下 : 
-moz-radial-gradient(position, shape size, color-stop1, color-stop2, ...); 


会 提示 : 上 面 两 个 私有 函数 的 size 参数 值 仅 可 设置 为 关键 字 closest-side、closest-corner、farthest- 


side、farthest-corner、contain 或 cover。 


5.2.7 ”设计 径 回 渐变 梓 却 


本 节 以 示例 形式 介绍 径 同 渐变 的 灵活 设置 ， 演 示 设 计 径 同 渐变 的 一 般 方 法 。 
【示例 1】 下 面 示 例 演示 了 色 点 不 均匀 分 布 的 径 同 渐变 ， 效 果 如 图 5.31 所 示 。 
<style type= "text/css"> 


#demo { 
helght:200px: 
backeground: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /*Safari$.] - 6.0*/ 
backeground: -o-radial-gradient(red 5%, green 15%, blue 60%); /*Opera 11.6 - 12.0*/ 
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /*Firefox 3.6 - 15*/ 
background: radial-gradient(red 5%, green 15%, blue 6090): /# 标 准 语法 #/ 

} 

</style> 


<div 1d="demo"></div> 
【示例 2】shape 参数 定义 了 形状 ， 取 值 包 括 circle 和 ellipse， 其 中 circle 表示 圆 形 ，ellipse 表示 
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椭圆 形 ， 默 认 值 是 ellipse。 下 面 示例 设计 圆 形 径 同 渐变 ， 效 果 如 图 5.32 所 示 。 

#demo { 
height:200px; 
backeground: -webkit-radial-gradient(circle, red, yellow, green); /*Safari 5.] - 6.0*/ | 
backeground: -o-radial-gradient(circle, red, yellow, green); /*Opera 11.6 - 12.0*/ ] 
background: -moz-radial-gradient(circle, red, yellow, green); /*Firefox 3.6 - 15*/ | Note | 
background: radial-gradient(circle, red, yellow, green): 上 旋 标 准 语法 */ Note 

} 


| 到 htpx/localhostt * 0 | Blocalhost 


图 5.31 设计 色 点 不 均匀 分 布 的 径 回 渐变 效果 图 5.32 ”设计 圆 形 径 加 渐变 效果 
【示例 3】 下 面 设计 径 同 渐变 的 半径 长 度 为 从 圆心 到 离 圆 心 最 近 的 边 ， 效 果 如 图 5.33 所 示 。 
#demo { 
height:200px; 


/*Safari 5.1 - 6.0*/ 
backeground: -webkit-radial-gradient(60% $5%, closest-side,blue,green,yellow.black); 
/*Opera 11.6 - 12.0*/ 
background: -o-radial-gradient(60% $5%, closest-side,blue,green,yellow,black): 
/*Firefox 3.6 - 15*/ 
backeground: -moz-radial-gradient(60% $5%, closest-slde,blue,green,yellow.black): 
/# 标 准 语法 部 
backsground: radial-gradient(closest-side at 60% 55%, blue,green,yellow.black): 

} 


< 外 注意 : radial-gradientO 标 准 函 数 与 各 私有 函数 在 设置 参数 时 的 顺序 区 别 。 


【示例 4】 下 面 示例 模拟 太阳 初 升 的 效果 ， 如 图 5.34 所 示 。 设 计 径 加 渐变 中 心 点 位 于 左下 角 ， 半 
径 为 最 大 化 显示 。 定 义 3 个 色 点 ， 第 1 个 色 点 设计 太阳 效果 ， 第 2 个 色 点 设计 太阳 余晖 ， 第 3 个 色 操 
设计 太空 ， 第 1 个 色 点 和 第 2 个 色 点 距离 为 60px。 


#demo { 
height:200px; 
/*Safari $5.1 - 6.0*/ 
background: -webkit-radial-gradient(left bottom, farthest-side, #t00, #f{99 60px, #005); 
/*Opera 11.6 - 12.0*/ 
backeground: -o-radial-gradient(left bottom, farthest-side, #f00, #f{99 60px, #005); 
/*Firefox 3.6 - 15*/ 
background: -moz-radial-gradient(left bottom, farthest-side, #f£00, #1{99 60px, #005): 
谍 标 准 语法 */ 
backeground: radial-gradient(farthest-side at left bottom, #f00, #f99 60px., #005); 


wl 
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DD localhost:8080/mysite/ x WN 


GC | ©@ localhost:808D/ : | = 外 - 古 htp/localhosti ~ 昌 节 古 lccalhost 


图 5.33 设计 最 小 限度 的 径 癌 渐变 效果 图 5.34 模拟 太阳 初 升 效果 


【示例 5】 下 面 示例 模拟 使 用 径 癌 渐变 绘制 圆 形 图 效果 ， 如 图 5.35 所 示 。 设 计 径 同 渐变 中 心 氮 位 
于 对 象 中 央 ， 定 义 两 个 色 点 ， 第 1 个 色 点 设计 圆 形 效 果 ， 第 2 个 色 点 设计 背景 ， 两 个 色 点 位 置 相同 。 


<style type="text/css"> 
body {background:hsla(207,59%,78%,1.00)} 
#demo { 
height:200px; 
width:300px:; 
margin:auto; 
/*Safari 5.1 - 6.0*/ 
background: -webkit-radial-gradient(center, circle, #f00 SOpx, #fff SOpx); 
/*Opera 11.6 - 12.0*/ 
background: -o-radial-gradient(center, circle, #{00 SOpx, #HE S50px); 
/*Firefox 3.6 - 15*/ 
background: -moz-radial-gradient(center, circle, #f00 SO0px, #fff 50px); 
诺 标 准 语法 */ 
backeground: radial-gradient(circle at center, #f00 SOpx, #fff SOpx): 
} 
</style> 
<div 1d="demo"></div> 


Xx 


= = 由 ， 刁 http:, /Iocalho... ~ 已 和 @ localhost 


图 5.35 设计 圆 形 效果 
5.2.8 定义 重复 径 向 渐变 


使 用 repeating-radial-gradientO 函 数 可 以 定义 重复 线性 渐变 ， 用 法 与 radial-gradientO 函 数 相 同 ， 用 
户 可 以 参考 前 面 说 明 。 
【示例 1】 下 面 示例 设计 三 色 重 复 显 示 的 径 回 渐变 ， 效 果 如 图 5.36 所 示 。 


<style type="text/css"> 
#demo { 


.20s 


第 5 章 使 用 CSS 设计 得 暴 样式 ES 


helght:200px: 

/*Safari 5.1 - 6.0*/ 

backeground: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%): 
/*Opera 11.6 - 12.0*/ 

background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); 
/*Firefox 3.6 - 15*/ 


background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); ‘Note 
/* 标 准 语法 #/ 
background: repeating-radial-gradient(red, yellow 10%, green 15%): 

} 

</style> 


<div 1d="demo"></div> 


【示例 2】 使 用 径 同 渐变 同样 可 以 创建 条 纹 背景 ， 方 法 与 线性 渐变 类 似 。 下 面 示例 设计 圆 形 径 回 
渐变 条 纹 背景 ， 效 果 如 图 5.37 所 示 。 


#demo { 

helght:200px: 

/*#Safarl 5.1 - 6.0*/ 

background: -webkit-repeating-radial-gradient(center bottom, circle, #00a340, #00a340 20px, #d8ffe7 20px, 
#d8ffe7 40px); 

/*Opera 11.6 - 12.0*/ 

background: -o-repeating-radial-gradient(center bottom, circle, #00a340, #00a340 20px, #d8ffe7 20px, 
#d8ffe7 40px): 

/*Firefox 3.6 - 15*/ 

background: -moz-repeating-radial-gradient(center bottom, circle, #00a340, #00a340 20px, #d8ffe7 20px, 
#d8ffe7 40px); 

谍 标 准 语法 */ 

backeground: repeating-radial-gradient(circle at center bottom, #00a340, #00a340 20px, #d8ffe7 20px, #d8ffe7 40px); 


x x 
和 人 由 -| 碟 http://localho.. ~ @ 0 || @ localhost x 国 从 € 字 由 -| 碟 http://localho... > @@0 | localhost X 加 从 大 


图 5.36 设计 重复 显示 的 径 向 渐变 效果 图 5.37 设计 径 向 渐变 条 纹 背 景 效果 
5.2.9 案例 : 设计 网 页 背景 


【示例 1】 为 页 面 登 加 多 个 径 同 渐变 背景 ， 可 以 营造 虚 弥 的 页 面 氛 围 。 示 例 代 码 如 下 所 示 ， 预 览 
效果 如 图 5.38 所 示 。 


<style type="text/css"> 
html body {height: 100%%:;} 


body { 
background-color: #4B770A: 


广 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
i 
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background-1mage: 
radial-gradient( rgba(255, 255, 255, 0.3), reba(255, 255, 255, 0)), 
radial-gradient(at 10% 5%, reba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 20%), 
radial-gradient(at left bottom , rgba(255, 255, 255, 0.2), reba(255, 255, 255, 0) 20%), 
radial-gradient(at right top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 20%), 
radial-gradient(at 85% 90% , rgba(255, 255, 255, 0.1), reba(255, 255, 255, 0) 20%); 


} 
</style> 
在 上 面 示例 代码 中 ， 首 先 设计 body 高 度 满 屏 显 示 ， 避 免 无 内 容 时 看 不 到 效果 然后 为 页 面 定 义 


一 个 基本 色 #4B770A; 再 设计 5 个 径 同 渐变 ， 分 别 散 布 于 页 面 4 个 项 角 和 中 央 位 置 ， 同 时 定义 径 同 渐 


” 变 的 第 1 个 颜色 为 半 透 明 的 白色 , 第 2 个 颜色 为 透明 色 ， 从 而 在 页 面 不 同位 置 蒙 上 轻重 不 一 的 白粉 效 


果 ， 以 此 来 模拟 虚幻 莫 测 的 背景 效果 。 
【示例 2】 为 页 面 登 加 4 个 径 同 渐变 背景 ， 设 计 密 密 厅 及 的 针脚 纹理 效果 。 示 例 代 码 如 下 所 示 ， 
预览 效果 如 图 5.39 所 示 。 


<style type="text/css"> 
html, body {height: 100%:;} 
body { 
background-color: #282828; 
backeground-1mage: 
-webkit-radial-gradient(black 15%, transparent 16%), 
-webkit-radial-gradient(black 15%, transparent 16%), 
-webkit-radial-egradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); 
backeground-1mage: 
radial-gradient(black 15%, transparent 16%), 
radial-gradient(black 15%, transparent 16%), 
radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); 
background-position: 
0 Opx, 
8pXx 8pX, 
0 1px, 
8px 9pX; 
background-size: 16px 16px:; 


} 
</style> 


图 5.38 设计 多 个 径 问 渐变 背景 效果 图 5.39 设计 和 针脚 纹理 背景 效果 
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在 上 面 示例 代码 中 ， 首 先 使 用 background-size: 16px 16px: 定 义 背 景 图 大 小 为 16px X16px; 然后 在 
这 块 小 图 上 设计 4 个 径 同 渐变 ,包括 两 个 深 色 径 癌 渐变 和 两 个 浅 色 径 癌 渐变 ; 再 使 用 background-position: 
0 Opx, 8pXx 8px, 0 1pX, 8pX 9px; 设 计 一 深 、 一 涛 径 癌 渐变 错位 车 加 ， 在 y 轴 上 错位 lpx; 从 而 在 16X16 | 
大 小 的 浅 色 背景 图 上 设计 了 两 个 深 色 凹陷 效果 ; 最 后 ， 借 助 背 景 图 平 铺 ， 为 网 页 设计 上 述 纹理 特效 。 | 


5.2.10 案例: 设计 按钮 


【示例 1】 利 用 CSS3 线性 渐变 设计 立体 的 按钮 效果 ， 同 时 定义 当 按 钮 激活 或 者 鼠标 经 过 时 ， 调 
整 线性 渐变 的 方向 ， 实 现 动态 提示 啊 应 。 示 例 代 码 如 下 所 示 ， 演 示 效 果 如 图 5.40 所 示 。 


<style type="text/css"> 

证 按钮 默认 类 样式 */ 

.button { 
诺 为 按钮 底部 添加 浅 色 的 阴影 */ 
-moz-box-shadow:inset Opx 1px Opx Opx #ffFf: 
-webkit-box-shadow:1inset Opx 1px Opx Opx #ffffff: 
box-shadow:1inset Opx 1px Opx Opx #1fffFFF: 
谍 设 计 从 上 到 下 线性 渐变 ， 颜 色 为 半 透 明 的 浅 灰 色 到 半 透 明 的 浅 白色 */ 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)): 
/# 谷 歌 传统 用 法 类 
backeground:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%); 
background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%): /* 谷 歌 标准 用 法 */ 
background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%):; 
background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%):; /# 兼 容 IE9*/ 
backeground:linear-gradient(to bottom, #ededed $5%, #dfdfdf 100%):; 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf ,GradientIype=0); 


/*JE 滤 镜 特效 */ 
/# 定 义 背景 基色 所 
background-color:#ededed: 
谍 设 计 圆 角 效 果 */ 
-moz-border-radius:6px; 
-webkit-border-radius:6px:; 
border-radius:6px:; 
诺 定 义 浅 色 边框 线 */ 
border: 1px solid #dcdcde: 
display:inline-block': 诺 行 内 块 显示 */ 
cursor:pointer: 此 鼠标 经 过 显示 手 形 指针 样式 */ 
color:#777777: 颇 字 体 中 灰色 显示 */ 
font-family:arial; 
font-size: 16px:; 
font-weight:bold; 
padding: 12px 24px: 诺 调 整 按钮 大 小 */ 
text-decoration:none: /# 清 除 可 能 存在 的 下 画 线 样式 所 
text-shadow:0px 1px Opx #EEPPfF 谍 为 按钮 文本 添加 浅 色 阴 影 */ 
} 
谍 鼠 标 经 过 时 按钮 类 样式 */ 


.button:hover { 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(], #ededed)); 
background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%): 
background:-webkit-linear-gradient(top, #dfdfdf $5%, #ededed 100%); 
backeground:-o-linear-gradient(top, #dfdfdf $5%, #ededed 100%):; 


° 131。 


Eee (sss 网 页 设计 从 入 门 到 精通 (机 神 精 编 县 ) 


background:-ms-linear-gradient(top, #dfdfdf $5%, #ededed 10090): 

background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%); 

filter:progid:DXImageTransform Microsoft.gradient(startColorstr=#dfdfdf, endColorstr='#ededed',Gradient Type=0); 
background-color:#dfdfdf: 


} 

谍 被 激活 时 按钮 类 样式 */ 

.button:active { 
position:relative: 此 相对 定位 ， 方 便 移 位 */ 
top:1px: /# 下 移 1px*/ 

} 

</style> 


<a hre 伍 "#" ”class="button"> 使 用 线性 渐变 设计 立体 动态 按钮 效果 </a> 


< > 中 -| 恒 http://localho... ~ 全 C 全 他 中 -| 奉 http://localho... ~ 明 上 各 > 
局 


局 


默认 从 上 到 下 渐变 鼠标 经 过 时 从 下 到 上 渐变 激活 时 下 移 1px 
图 5.40 ”设计 按钮 效果 
【示例 2】 本 示例 设计 按钮 在 正 篆 状 态 下 带 有 边框 且 有 渐变 和 阴影 效果 ， 当 鼠标 经 过 时 会 显示 比 


较 暗 的 渐变 背景 效果 ， 当 按 下 鼠标 时 会 翻转 渐变 背景 ， 并 显示 1px 的 下 沉 效果 ， 按 钮 字体 颜色 加 深 。 
演示 效果 如 图 5.41 所 示 。 


[0 localhost/mysite/test.rt x 同和 
> C&C | localhost/mysite/testhtml 


辐 用 反衬 


图 5.41 设计 精致 的 按钮 


示例 代码 如 下 : 


<style type="text/css"> 
谍 设 计 页 面 基本 样式 : 浅 色 背景 、 网 页 居中 、 浅 灰 字 体 */ 
body {background:#ededed: margin: 30px auto; color: #999:} 
.button { /# 定 义 渐变 按钮 样式 类 4 
display: Inline-block: 
/*zoom 和 *display 属性 都 为 了 兼容 IE7， 使 其 具有 display:inlineblock 特性 */ 


zoom: 1; 

*display: nline; 

vertical-align: baseline: 旋 垂 直 基 线 对 齐 */ 

margin: 0 2px: /# 左 右 加 2px 边界 ， 避 人 免 按 钮 挤 在 一 起 */ 
outline: none: /# 清 除 轮 廓 线 ， 针 对 a 和 表单 按钮 */ 
cursor: pointer: 诺 增 加 鼠标 经 过 时 显示 手 形 指针 */ 
text-align: center; 诺 文 本 水 平 对 齐 */ 
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text-decoration: none: /# 清 除 下 画 线 ， 针 对 a*/ 
font: 14px/100% Arial, Helvetica, sans-serif: 
padding: .Sem 2em .55em:; 上 谍 调 整 按 钮 内 补 白 ， 让 按钮 看 起 来 更 大 方 */ 


谍 设 计 按 钮 圆 角 、 盒 子 阴 影 和 文本 阴影 特效 */ 
text-shadow: 0 lpx lpx rgba(0, 0, 0, .3); 
-webkit-border-radius: .Sem: 

-moz-border-radius: .Sem: 

border-radius: .Sem: 旋 精 致 圆 角 */ 
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2): 
-moz-box-shadow: 0 lpx 2px rgba(0, 0, 0, .2); 


box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 诺 添 加 淡淡 阴影 */ 
} 
.button:hover {text-decoration: none:} /# 忌 标 经 过 清除 下 画 线 ， 针 对 a*/ 
.button:active { /# 按 钮 被 激活 时 ， 下 沉 lpx， 模 拟 思 陷 效 果 */ 
position: relative; 
top: 1px; 
} 
.bigrounded { 旋 定 义 大 圆 角 样式 类 */ 
-webkit-border-radius: 2em: 
-moz-border-radius: 2eml: 
border-radius: 2em' 
} 
.medium { 诺 定 义 大 按钮 样式 类 */ 
font-size: 12px; 
padding: .4em 1.Sem .42em: 
} 
.small { 话 定 义 小 按钮 样式 类 */ 


font-slze: 11px; 
padding: .2em lem .275em:; 


} 

/# 设 计 颜 色 样 式 类 : 黑色 风格 的 按钮 */ 

/# 通 过 设计 不 同 颜色 样式 类 ， 设 计 不 同 风 格 的 按钮 效果 头 
.black { /#* 黑 色 样 式 类 #/ 


color: #d7d7d7: 

border: solid 1px #333; 

background: #333; 

backeground: -webkit-egradient(linear, left top, left bottom, from(#666), to(#000)): 

backeground: -moz-linear-gradient(top, #666, #000); 

background: linear-gradient(to top, #666, #000); 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666'", endColorstr=#000000"); 


} 
.black:hover { /* 黑 色 鼠 标 经 过 样式 类 */ 


background: #000; 

background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)): 

background: -moz-linear-gradient(top, #444, #000); 

background: linear-gradient(to top, #444, #000): 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr”='#444444', endColorstr=#000000"); 


} 
.black:active { /# 黑 色 激 活 样 式 类 #/ 


color: #666: 
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)): 
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5.2.11 案例 : 设计 图 标 


”所 示 。 在 内 部 样式 表 中 , 使 用 radial-gradientO 函 数 为 图 标 标签 定义 径 
”向 渐变 背景 ， 设 计 立 体 效果 ; 使 用 “border-radius:50%:” 声 明定 义 图 
' 标 显 示 为 圆 形 ; 使 用 box-shadow 属性 为 图 标 添 加 投影 ; 使 用 
”text-shadow 属性 为 图 标 文本 定义 润 边 效果 ; 使 用 radial-gradient 设计 


Csss 网 页 设计 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


background: -moz-linear-gradient(top, #000, #444); 

backeground: linear-gradient(to top, #000, #444): 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr=#666666"):} 
</style> 
<div> 

<a hre 伍 "#" class="button black"> 圆 角 按 钮 </a> 

<a hre 传 "#f' class="button black bigrounded"> 大 号 椭圆 按钮 </a> 

<a hre 人 f="#" class="button black medium"> 中 号 按钮 </a> 

<a hre 伍 "#" class="button black small"> 小 号 按钮 </a> <br 放 > 
</div> 


本 示例 设计 的 按钮 具有 如 下 特点 : 

加 ”不 需要 图 片 和 JavaScript。 

加 ”兼容 I 正 、Firefox 3.6+、Chrome 和 Safari 等 主流 浏览 器 。 

文 持 3 种 按钮 状态 ， 如 正常 、 巷 停 和 激活 。 

可 以 应 用 到 任何 HTML 元 素 ， 如 a、input、button、span、div、p、h3 等 。 

安全 兼容 不 支持 CSS3 的 浏览 器 ， 如 果 不 兼 容 CSS3， 则 显示 没有 渐变 和 阴影 的 普通 按钮 。 


中 古 httpy/localho. ~ BCl|e 


本 例 通 过 CSS3 径 同 渐变 制作 圆 形 图 标 特效 ,设计 效果 如 图 5.42 


| 环形 径 向 渐变 效果 ， 为 图 标 添加 高 亮 特效 。 图 5.42 设计 径 向 渐变 图 标 效果 
示例 主要 代码 如 下 : 
<style type="text/css"> 
-Icon { 


/# 固 定 大 小 ， 可 根据 实际 需要 酌情 调整 ， 调 整 时 应 同步 调整 line-height:60px;*/ 
width: 60px: helght: 60px: 
谍 行 内 块 显示 ， 统 一 图 标 显示 属性 */ 
display:inline-block; 
记 清 除 边框 ， 避 人 免 边框 对 整体 特效 的 破坏 */ 
border: none: 
诺 设 计 圆 形 效 果 */ 
border-radius: 50%: 
计 定 义 图 标 阴影 ， 第 一 个 外 阴影 设计 立体 效果 ， 第 二 个 内 阴影 设计 高 之 特效 */ 
box-shadow: 0 lpx Spx rgba(255,255,255,.5) nset, 
0 -2px Spx rgba(0,0,0,.3) Inset, 0 3px 8px rgba(0,0,0.,.8); 
诺 定 义 径 问 渐变 ， 模 拟 明暗 变化 的 表面 效果 */ 
background: -webkit-radial-gradient( circle at top center, #f28fb8, #e982ad, #ec568c); 
background: radial-gradient(circle at top center, #f28fb8, #e982ad, #ec568c); 


此 定 义 图 标 字 体 样式 */ 

font-size: 32px; 

color: #dd5 183: 

text-align:center; 席 文 本 水 平 居 中 显示 */ 


line-height:60px: /文本 垂直 居中 显示 ， 必 须 与 height: 60px; 保 持 一 致 */ 
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/* 为 文本 添加 阴影 ， 第 一 个 阴影 设计 立体 效果 ， 第 二 个 阴影 定义 高 亮 特效 | 
text-shadow: 0 3px 10px #fl1a2c], | 
0 -3px 10px #f1a2c1:; 


} | 

</style> 
<div class="icon">Dw</div> | 知 
<span class="1con">Fl</span> Note 
<p class="icon">PS</p> 


5.3 案例 实战 | 


本 节 将 通过 多 个 较 复杂 案例 练习 背景 样式 的 实际 应 用 。 oe 
5.3.1 设计 优惠 券 
本 例 使 用 径 向 渐变 设计 一 张 优惠 券 ， 效 果 如 机 


图 5.43 所 示 。 CN 人 G @ localhost 
先 了 解 本 案例 的 HTML 结构 : 整个 界面 包裹 


上 上品 析 相 店 a 疗 | 
在 <div class="stamp stamp yellow"> 标 签 中 ，stamp i 2 
类 样式 定制 优惠 券 结构 样式 ，stamp_yellow 类 样 ¥ OO0.00 sos we | 
式 定制 优惠 券 风格 样式 ， 即 配色 效果 ; 在 该 包含 订单 满 100.00 元 | 


框 中 ， 骨 入 了 两 个 子 结构 ，<div class="par"> 负 责 
设计 左 侧 文 本 显示 ，<div class="copy"> 负 责 定 制 0 
图 5.43 ”设计 优惠 券 效 果 | 

右 侧 信息 ， 在 包含 框 的 底部 嵌入 一 个 < 这 标签 ， 访 | 
标签 负责 设计 优惠 券 右 下 高 亮 显示 面 。 | 
示例 主要 代码 如 下 ， 样 式 代码 解读 请 参考 注释 文本 。 ] 


| 
<style type="text/css"> | 


放 通 用 类 样式 */ | 
.stamp { 
width: 387px: height: 140px: 旋回 定 大 小 ， 方 便 设计 */ 
padding: 0 10px: /# 左 右 留 出 10px 空间 ， 用 来 设计 锯齿 边沿 效果 */ | 
position: relative; 谍 相 对 定位 ， 定 义 定 位 包含 杠 ， 方 便 内 部 对 象 定位 显示 */ ] 
overflow: hidden: 上 话 禁 止 超出 显示 ， 避 免 破 坏 券 面 布局 */ | 
) 
.stamp:before {/* 设 计 底 色 */ ] 
content: ": 上 诺 设 计 一 个 空 的 内 容 层 */ | 
position: absolute: 诺 绝 对 定位 显示 */ 
z-index: -1: 诺 让 该 层 显示 在 文本 的 下 面 */ | 
top: 0; 此 定义 大 小 ， 顶 部 对 齐 */ 
bottom: 0: 话 定 义 大 小 ， 底 部 对 齐 */ | 
left: 10px: 诺 定 义 大 小 ， 左 侧 留 白 10px*/ | 
right: 10px: 诺 定 义 大 小 ， 右 侧 留 白 10px*/ ] 


} 
.stamp:after {/* 设 计 底 色 阴 影 */ | 
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content: ": 颇 设 计 一 个 空 的 内 容 层 */ 
position: absolute: /绝对 定位 显示 部 
left: 10px: /# 定 义 大 小 ， 左 侧 留 白 10px*/ 
top: 10px: /# 定 义 大 小 ， 顶 部 留 白 10px*/ 
night: 10px: 诺 定 义 大 小 ， 右 侧 留 白 10px*/ 
bottom: 10px; /# 定 义 大 小 ， 底 部 留 白 10px*/ 
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5); ”/* 为 左右 句 齿 设计 阴影 效果 */ 
z-index: -2: 诺 设 计 该 层 显示 在 最 底部 */ 
} 
.stamp 1 {设计 高 之 面 */ 
position: absolute: 谨 绝 对 定位 显示 */ 
left: 20%: top: 45px: 诺 显 示 位 置 */ 
height: 190px: width: 390px: 人 * 定 义 大 小 */ 
background-color: rgba(255,255,255,.15); 庄 定 义 淡 淡 的 高 完 色 */ 
transform: rotate(-30deg); 诺 旋 转角 度 ， 禾 盖 在 右 下 面 显示 */ 
} 
.stamp .par {* 设 计 左 侧 文本 样式 */ 
float: left: 
padding: 16px 1Spx; 
width: 220px:; 


border-right: 2px dashed reba(255,255,255,.3); /* 在 正 、 副 券 绘制 一 条 垂直 虚线 */ 
text-align: left: 


} 
.stamp .par p { color: #fff margin:6px 0: } 谍 设 计 正 文 文本 样式 */ 
.stamp .par span { 谍 设 计 金 额 样式 */ 
font-size: SOpx:; 
color: #fff: 
margin-right: Spx:; 
} 
.stamp .par .sign { font-size: 34px: } 诺 设 计 人 民 币 符号 样式 */ 
.stamp .par sub { 
position: relative: 上 相对 定位 ， 方 便 移 位 */ 
top: -Spx; 谨 下 移 ， 底 部 对 齐 */ 
color: rgba(255,255,255,.8); 
} 
.stamp .copy { 诬 设 计 右 侧 文本 样式 */ 
display: Inline-block: 
padding: 21px 14px; 
width: 100px: 
vertical-align: text-bottom:; 
font-size: 30px; 
color mb(255 255 255} 
padding: 10px 6px 10px 12px;: 
font-size: 24px; 
} 
‘stamp .copy p { 
font-size: 13px; 
margin-top: 12px; 
margin-bottom: 16px:; 
} 
.stamp .copy a { 谍 设 计 局 平 化 按钮 样式 */ 
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background-color: #fff: 
color: #333; 

font-size: 14px; 
text-decoration: none: 
text-align:center:; 
padding: Spx 10px; 
border-radius: 4px:; 


display: block:; 

} 

谍 设 计 风 格 */ 

谍 牧 黄 */ 

.stamp _ yellow {/* 正 文 背 景 样式 ， 通 过 径 疝 渐变 定义 圆 形 纹理 背景 */ 
background: #F39B00: 
backeground: radial-gradient(regba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) Spx, #39B00 Spx); 
background-size: 15px 1Spx: /# 定 义 每 个 圆 形 大 小 闻 
background-position: 9px 3px: 诺 左 右 两 侧 显 示 圆 孔 形 背景 */ 


} 
此 设计 正文 部 分 仅 显 示 单 色 背 景 ， 左 右边 沿 显 示 圆 孔 锯 齿 背 景 */ 
.stamp yellow:before {background-color: #F39B00;} 
</style> 
<div class="stamp stamp yellow"> 
<div class="par"> 
<p> 上 品 折 扣 店 </p> 
<sub class="sign"> 茸 </sub><span>S0.00</span><sub> 优 惠 券 </sub> 
<p> 订 单 满 100.00 元 </p> 
</div> 
<div class="copy"> 副 券 
<p>2018-06-01<br> 
2018-06-18</p> 
<a hre 伍 "#"> 立 即使 用 </a></div> 
<1></> 
</div> 
在 上 面 示例 基础 上 ， 用 户 可 以 设计 不 同 风格 的 界面 效果 。 例 如 ， 重 新 定义 主题 风格 样式 ， 可 以 拓 
展 更 多 主题 的 优惠 券 。 主 要 技巧 在 于 修改 正文 背景 色 和 径 同 渐 变 的 第 二 个 颜色 〈test2.html)， 效 果 如 
图 5.44 所 示 。 
/* 浅 红 权 
.stamp Ted { 
backeground: 的 )24161: 
backsground: radial-gradient(transparent 0, transparent Spx, #D2416]1 Spx); 
background-size: 1Spx 15px; 
background-position: 9px 3px; 


} 

.stamp red:before {background-color: #D24161:;} 

族 浅 绿 */ 

.stamp green { 
background: #7EAB1E: 
backeground: radial-gradient(transparent 0, transparent Spx, #7EAB1E Spx); 
backsground-slze: 1Spx 15px; 
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background-position: 9px 3px: 


} 
.stamp green:before {background-color: #7EABI1E;} 
re “Bg 
.stamp blue { 
width: 390px:; 
background: #5S0ADD3; 
| background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD?3 4px): 
background-size: 12px 8px: 
| background-position: -Spx 10px:; 
} 


.stamp_blue:before {background-color: #50ADD3;} 


Se (+) | Pttpy/localhosta080/mysits/tsst2.html -0 | localhost x ue: 


上 品 折扣 店 副 券 上 品 折扣 店 EE 


018-06-01 D18-06-01 


y SOQ00 Ss 2018-06-18 Y SOQ00 ey 2018-06-18 
订单 满 100.00 元 订单 湛 100.00 元 


上 品 折扣 店 副 券 上 品 折扣 店 副 状 


D18-06-01 


2018-06-01 2 l 

4 SO 00 2013-06-18 ¥ SO 00 2D018-06-18 , 
5 长 再 戎 区 亿 亚 并 
订单 满 100.00 元 的 用 订单 满 100.00 元 Ri) 使 用 时 


图 5.44 设计 不 同 风格 的 优惠 券 效果 
5.3.2 ”设计 果 面 纹理 背景 


本 例 使 用 CSS3 线性 渐变 属性 制作 纹理 图 案 ， 主 要 利用 多 重 背景 进行 设计 ， 然 后 使 用 线性 渐变 绘 
制 每 一 条 线 ， 通 过 辣 加 和 平 铺 ， 完 成 重复 性 纹理 背景 效果 ， 如 图 5.45 所 示 。 


CN) ES htp://ocalhost/ rmysite/test html 及 -有 dl 过 iocalhost 


图 5.45 定义 网 页 纹理 背景 效果 


案例 主要 代码 如 下 : 


<style type="text/css"> 
.patterns { 
width: 200px; height: 200px; float: left: margin: 10px:; 
box-shadow: 0 lpx 8px #666:} 
A 
background-size: SOpx SOpx:; 
background-color: #0ae; 


PE 
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background-1mage: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
backeground-1mage: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent):;} 
.pt2 { 
background-size: SOpx S0PpX: 
background-color: #f90; 
background-1mage: -webkit-linear-gradient(0deg, reba(255, 255, 255, .2) 50%, transparent $0%, transparent); 
backeground-1mage: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);} 
-pt3 { 
background-size: SOpx SOpx; 
background-color: white: 
background-1mage: -webkit-linear-gradient(to top, transparent $50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 
0, .5)), -webkit-linear-gradient(to left, transparent $0%, rgba(200, 0, 0, .5) 50%, reba(200, 0, 0, .5)); 
backeground-1mage: linear-gradient(to top, transparent $50%, rgba(200, 0, 0, .5) $50%, reba(200, 0, 0, .5)), 
linear-gradient(to left transparent $50%, reba(200, 0, 0, .5) 50%, reba(200, 0, 0, .5))} 
.pt4 { 
backeground-size: SOpx SOpx; 
background-color: #acO0:; 
backeground-1mage: -webkit-linear-gradient(4Sdeg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 
$0%, reba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 
backeground-1mage: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent $50%, 
rgba(255, 255, 255, .2) 50%, rgeba(255, 255, 255, .2) 75%, transparent 75%, transparent);} 
</style> 
</head> 
<body> 
<div class="patterns ptl"></div> 
<div class="patterns pt2"></div> 
<div class="patterns pt3"></div> 
<div class="patterns pt4"></div> 
</body> 
</html> 


灵活 使 用 径 癌 渐变 和 线性 渐变 ， 用 户 还 可 以 设计 更 多 图 案 (test2.html)， 如 图 5.46 所 示 。 


| hp:/ocalhosy mysietest.html maclseocrc < 若 


(OO tg 
(SGISS 


图 5.46 设计 丰富 的 纹理 背景 效果 


ee 
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5.3.3 ”渐变 特殊 应 用 场景 


| 渐变 可 以 用 在 border-image-source、background-image、list-style-image、cursor 等 属性 上 ， 用 来 
”取代 rl 属性 值 。 前 面 各 节 主 要 针对 background-image 属性 进行 介绍 ， 下 面 结合 示例 介绍 其 他 属性 的 


UL 应 用 情形 。 
1， 定义 渐变 效果 的 边框 


【示例 1】 本 例 通过 CSS3 渐变 ， 为 border-image 属性 定义 渐变 边框 ， 效 果 如 图 5.47 所 示 。 


<style type="text/css"> 
dv { 
width: 400px: 
height: 200px:; 
margin: 20px:; 
border: solid #000 S50px: 
-webkit-border-1mage:-webkit-linear-gradient(yellow, blue 20%, #0f0) S0;  /*Safari $5.1- 6.0*/ 


-0-border-1mage: -0-linear-gradient(yellow, blue 20%, #0f0) 50; /*Opera 11.1 - 12.0*/ 
-moz-border-1mage: -moz-linear-gradient(yellow, blue 20%, #0f0) $50; /*Firefox 3.6 - 15*/ 
border-image: linear-gradient(yellow, blue 20%, #0f0) 50: /# 标 准 语法 #/ 

} 

</style> 

<div></div> 


口 localhost:8080/mysite/ X WO 


GC | © localhost:8080/mysite/test1.html 


图 5.47 设计 渐变 边框 效果 
2. 定义 填充 内 容 效 果 


【示例 2】 本 例 通 过 conten 属性 ， 为 <div class="div1"> 标 签 散 入 一 个 通过 渐变 设计 的 圆 球 ， 同 时 
， 为 这 个 包含 框 设计 一 个 渐变 背景 ， 从 而 产生 一 种 透视 框 的 效果 ， 如 图 5.48 所 示 (test1.html)。 


<style type="text/css"> 
.divl { 人 # 设 计 包含 框 的 外 形 和 大 小 更 
width: 400px: helght: 200px: 
border: 20px solid #A7D30C; 
} 
.divl:before { 
/# 在 div 元 素 前 插入 内 容 对 象 ， 在 该 对 象 中 绘制 一 个 背景 图 形 ， 并 定义 显示 边框 效果 */ 
/*Safari $5.1 - 6.0*/ 
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content: -webkit-radial-gradient(left bottom, farthest-side, #f00, #f{99 60px, #005):; 
/*Opera 11.6 - 12.0*/ 
content: -0o-radial-eradient(left bottom, farthest-side, #{00, #{99 60px, #005); 
/*Firefox 3.6 - 15*/ 
content: -moz-radial-gradient(left bottom, farthest-side, #{00, #f{99 60px, #005); 
记 标 准 语法 */ 
content: radial-gradient(farthest-side at left bottom, #f00, #f99 60px, #005); 

} 

</style> 

<div class="div1"></div> 


3. 定义 列表 图 标 


【示例 3】 本 例 通 过 list-style-image 属性 ， 为 ul 元 素 定义 自 定义 图 标 ， 该 图 标 通过 渐变 特效 进 
绘制 ， 从 而 产生 一 种 精致 的 二 色 效 果 ， 如 图 5.49 所 示 。 


<style type="text/css"> 
ul {list-style-1mage: linear-gradient(red $50%, blue 50%):;} 
</style> 
<ul> 
<l>HIMLS</l> 
<li>CSS3</l> 
<li1>JavaScript</l1> 
</ul> 


Xx 
四- Btwotte-. -sc ad 


| = 中 -| 龟 hitp://localho... ~ 妨 0 和 参 localhost 


团 HTML5 
国 css3 
图 JavaScript 


图 5.48 插入 球形 内 容 填 充 物 并 显示 边框 效果 图 5.49 设计 项 目 符号 效果 


5.3.4 设计 栏目 折 角 效果 


灵活 使 用 CSS3 渐变 背景 ， 可 以 创作 出 很 多 新 颖 的 设计 。 
【示例 1】 使 用 线性 渐变 设计 右上 角 缺 角 的 栏目 ， 效 果 如 图 5.50 所 示 。 


<style type="text/css"> 
.box { 
background: linear-gradient(-135deg, transparent 30px, #162e48 30px); 
color: #fff: 
padding: 12px 24px; 
} 
</style> 
<div class="box"> 
<hl>W3C 发 布 HIMLS 的 正式 推荐 标准 </h1> 


<p>2014 年 10 月 28 日 , W3C 的 HIML 工作 组 正式 发 布 了 HIMLS 的 正式 推荐 标准 (W3C Recommendation)。 
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(sss 网页 设计 从 入 门 到 精通 (机 梨 精 编 版 ) 


W3C 在 美国 对 克拉 拉 举 行 的 W3C 技术 大 会 及 顾问 委员 会 会 议 (ITPAC 2014) 上 宣布 了 这 一 消息 。 HIMLS 是 万 
维 网 的 核心 语言 日 示 记 语言 的 第 $ 版 。 在 这 一 版 本 中 ， 增 加 了 支持 Web 应 用 开发 者 的 许多 新 特性 ， 以 
及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 关注 定义 清晰 的 、 一 致 的 准则 ， 以 确保 Web 应 用 和 内 容 在 不 同 用 户 
代理 (浏览 器 ) 中 的 互 操作 性 。HTMLS5 是 构建 开放 Web 平台 的 核心 。</p> 
<p class='"Tight"> 更 多 <a hre 伍 "http://www.chinaw3c.org/archives/677/" target=" blank"> 详 细 内 容 </a></p> 
</div> 


【示例 2】 使 用 线性 渐变 设计 右上 角 补 角 的 栏目 ， 效 果 如 图 5.51 所 示 。 


<style type="text/css"> 

-box { 
background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px); 
color: #fif: 
padding: 12px 24px; 


} 
</style> 


起 二 由， 党 http:f/localhost8080/m > 旦 C 层 localhost 全 一 ， 外 、 和] http:f/localhost8080/m ~ 久 C 层 localhost 


W3C 发 布 HT eb 
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图 5.50 设计 缺 角 栏目 效果 图 5.51 设计 补 角 栏 目 效果 
【示例 3】 使 用 box-shadow 为 栏目 加 上 高 亮 边 框 ， 同 时 需要 设计 网 页 背景 色 为 深 色 ， 效 果 如 图 5.52 
所 示 。 
<style type="text/css"> 
body {backeground:#000;} 
.box { 
backeground: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px); 
color: #fif: 
padding: 12px 24px; 
box-shadow: 0 0 lpx lpx #fff inset: 
} 
</style> 


【示例 4】 我 们 无 法 耳 接 为 屿 角 柱 目 设计 边框 线 效 末 ， 考虑 到 兼容 性 问题 ， 可 以 使 用 :before 和 :after 
实现 该 效果 。 注 意 ， 网 页 背景 色 为 深 色 ， 与 .box:after 边框 色 保 持 一 致 ， 如 图 5.53 所 示 。 


<style type="text/css"> 
body {background: #000:} 
.box { 
background: #162e48; 
color: #fff: 
padding: 12px 24px; 
position: relative: 
border: 1px solid #fff: 
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} 
.box:before { 


content: '": 
border: solid transparent: 
position: absolute; 
border-width: 30px: 
border-top-color: #fff: 
border-right-color: #fff: 
right: Opx; 
top: Opx; 

} 

.box:after { 
content: " '; 
border: solid transparent; 
position: absolute: 
border-width: 30px:; 
border-top-color: #000; 
border-right-color: #000; 
top: -1px; 
right: -1px:; 

} 

</style> 


x x 
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W3C 发 布 HT a > W3C 发 布 HTMLS 的 正式 推荐 标准 


2014 年 10 月 28 日 ，W3C 的 HTML 工 作 了 HTML3 的 正式 : 准 2014 年 10 月 28 日 ，W3C 的 HTML 工 作 组 THIMLS 的 正式 推荐 标准 
commendation) 。W3 和 六 l 【了 ommendation) 。W3C 在 美国 TE ) 


图 5.52 设计 高 天 边框 栏目 效果 图 5.53 设计 缺 角 边框 栏目 效果 


【代码 解析 】 
第 1 步 ， 在 示例 4 中， 首先 使 用 .box:before 在 容器 内 容 前 面 插入 一 个 粗 边框 对 象 : 白色 边框 ， 
度 为 30px， 由 于 内 容 为 空 content: '…:， 则 收缩 为 一 团 ， 显 示 如 图 5.54 所 示 。 
第 2 步 ， 使 用 绝对 定位 ， 将 三 角 填 充 物 精确 定位 到 右上 角 显 示 ， 如 图 5.55 所 示 。 


四 -| 三 hapyocalhosreoaom » Bc| Blochos >“ 辣 中 二 二 ED: hpiocahostsos0r ~ 8c lotos: x 
etm nt W3C 发 布 HTMILS 的 正式 推荐 标准 


2014 年 10 月 28 日 ，W3C 的 HIML 工 作 组 HIML5 的 正式 推荐 标准 机 28 日 ，W3C 的 HIML 工 作 组 正式 发 市 了 HTML5 的 正式 推荐 标准 
I s4 号 


生 。HTML5 是 构建 开放 Web 平 宕 es I Ce 性 ，HTML5 是 构建 开放 Web: 


图 5.54 设计 三 角 填 充 物 图 5.55 ”定位 三 角 填 充 物 到 栏目 右上 角 
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第 3 步 ， 使 用 .box:after 在 栏目 内 容 的 后 面 插入 一 个 同样 大 小 的 三 角形 填充 物 ， 边 框 色 为 背景 色 ， 
即 黑色 ， 如 图 5.56 所 示 。 


和 -人 由 、 古 hap:flocalhost8080/n "a 


W3C 发 布 HTMLS 的 正式 推荐 标准 


0 月 28 日 ，W3C 的 HTML 工 作 组 正式 发 MEL5 共 逢 标 六 
【W3C Recomimendation) 。W3C 芷 去 国 条 的 W3 


图 5.56 插入 一 个 黑色 三 角 填充 物 
第 4 步 ， 使 用 绝对 定位 ， 将 黑色 三 角 填 充 物 精确 定位 到 右上 角 显 示 ， 并 同 右 上 角 偏 移 1px， 遮 盖 


住 白色 区 域 ， 留 一 条 白色 颖 际 ， 即 可 完成 本 例 效 果 设 计 。 
5.4 在 线 练 习 


本 节 练 习 使 用 CSS3 设计 各 种 网 页 图 像 效 果 和 背景 图 像 特效 ， 强 化 基本 功 训练 。 
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使 用 CSS3 美化 列表 和 超 链 接 样 式 


在 默认 状态 下 ， 超 链接 文本 显示 为 蓝 色 且 带 有 下 画 线 ， 当 和 鼠标 指针 移 过 链接 对 象 时 显示 
为 手 形 ， 访问 过 的 超 链接 文本 显示 为 紫色 ; 列表 项 目 缩 进 显示 ， 并 在 左 侧 显示 项 目 符号 。 在 
网 页 设计 过 程 中 ， 一 般 都 会 根据 个 人 总 好 和 实际 需要 重新 定义 超 链 接 和 列表 样式 。 


【 学 习 重 点 】 

| 正确 使 用 行为 伪 类 。 

WI 能 够 灵活 设计 符合 页 面 风 格 的 链接 样式 。 
P| 定义 列表 样式 。 

| 能 金 根据 页 面 风格 设计 列表 菜单 样式 。 


Ge (sss 网页 设计 从 入 门 到 精通 (机 梨 精 编 版 ) 


6.1] 设计 超 链 接 样 式 


下 面 介绍 如 何 使 用 CSS3 设计 超 链接 的 基本 样式 。 
6.1.1 使 用 动态 盆 类 


在 网 页 设计 中 ， 用 户 可 以 使 用 CSS3 的 动态 伪 类 选择 器 定义 超 链接 的 4 种 状态 样式 。 

alink: 定义 超 链接 的 默认 样式 。 

a:visited: 定义 超 链接 被 访问 后 的 样式 。 

加 ”a:hover: 定义 鼠标 指针 移 过 超 链 接 时 的 样式 。 

aactive: 定义 超 链接 被 激活 时 的 样式 。 

【 示例】 在 下 面 示 例 中 ， 定 义 页 面 所 有 超 链 接 默 认为 红色 、 下 男 线 效果 ， 当 鼠标 经 过 时 显示 为 绿 
色 、 下 男 线 效果 ， 而 当 被 单 击 时 则 显示 为 黄色 、 下 画 线 效果 ,被 访问 过 之 后 显示 为 蓝 色 、 下 男 线 效 果 ， 
演示 效果 如 图 6.1 所 示 。 


<style type="text/css"> 
a:link {color: #FF0000;/* 红 色 */} /* 超 链接 默认 样式 */ 
a:Visited {color: #0000FF: /* 蓝 色 */} /* 超 链接 被 访问 后 的 样式 */ 
a:hover {color: #00FF00; /* 绿 色 */}/* 鼠 标 经 过 超 链接 的 样式 */ 
a:active {color: #FFFF00; /* 黄 色 */}/* 超 链接 被 激活 时 的 样式 */ 
</style> 
<ul class="p1"> 
<]i><a hre 住 "#" class="al"> 首 页 </a></li> 
<]i><a hre 住 "#" class="a2"> 新 闻 </a></li> 
<]i><a hre 伍 "#" class="a3"> 微 博 </a></li> 
</ul> 
<ul class="p2"> 
<li><a hre 人 f="#" class="al"> 关 于 </a></l> 
<]i><a hre 住 "#" class="a2"> 版 权 </a></li> 
<]i><a hre 伍 "#" class="a3"> 友 情 链 接 </a></li> 
</ul> 


a -> 绎 hiip://localhcstim Le 网 邓 多 localhoct 


图 6.1 定义 超 链接 样式 


会 提示 : 超 链 接 4 种 状态 样式 的 排列 顺序 是 固定 的 ， 一 般 不 能 随意 调换 。 正确 顺序 是 : link、visited、 


hover 和 active。 
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在 下 面 样式 中 ， 当 鼠标 经 过 超 链接 时 ， 会 先 执行 第 1 行 声明 , 但 是 紧 接 看 第 3 行 的 声明 全 站 
第 1 行 和 第 2 行 声明 的 样式 ， 所 以 就 无 法 看 到 鼠标 经过 和 被 激活 时 的 效果 。 


a.al:hover {color: #00FF00:} 


| 
a.al:active {color: #FFFFO00:} ] 
a.al:link {color: #FF0000;} | ~ 


a.al:visited {color: #0000FF:} | Note 


在 上 面 代码 中 ， 通 过 指定 类 型 选择 器 ， 限 定 上 面 4 个 样式 仅 作 用 于 包含 al 类 的 超 链接 中 。 

当然 ， 用户 可 以 根据 需要 仅 定 义 部 分 状态 样式 。 例 如 ， 硅 要 把 未 访问 的 和 已 经 访问 的 链接 定义 成 
相同 的 样式 ， 则 可 以 定义 link、hover 和 active 3 种 状态 

a.al:link {color: #F F0000;} 


a.al:hover {color: #00FF00:} 
a.al:active {color: #FFFFO0:} 


如 果 仅 希望 超 链接 显示 两 种 状态 样式 ， 可 以 使 用 a 和 hover 来 定义 。 其 中 a 标签 选择 器 定义 a 元 
素 的 默认 显示 样式 ， 然 后 定义 鼠标 经 过 时 的 样式 。 | 
a {color: #FF0000;} 
a:hover {color: #00FF00;} 
但 是 如 果 页 面 中 包含 锚 记 对 象 ， 将 会 影响 错 记 的 样式 。 如 果 定义 如 下 的 样式 ， 则 仅 影响 超 链接 未 
访问 时 的 样式 和 鼠标 经 过 时 的 样式 。 
a:link {color: #FF0000;} 
a:hover {color: #00FF00;} 


6.1.2 定义 下 男 线 样式 


在 设计 超 链接 样式 时 ， 下 夯 线 一 直 是 一 个 重要 效果 ， 巧 妙 结 合 下 夯 线 、 边 框 和 背景 图 像 ， 可 以 设 
计 出 很 多 富有 个 性 的 样式 。 例如 ,定义 下 画 线 的 色彩 、 距离 、 长 度 和 对 齐 方式 ,以 及 定制 双 下 夯 线 等 。 
如 果 用 户 不 喜欢 超 链 接 文本 的 下 男 线 样式 ， 可 以 使 用 CSS3 的 text-decoration 属性 进行 清除 。 
a {/* 完 全 清除 超 链 接 的 下 画 线 效果 */ | 


text-decoration:none: 


} 


从 用 户 体验 的 角度 考虑 ， 在 取消 默认 的 下 画 线 之 后 ， 应 确保 浏览 者 可 以 识别 所 有 超 链接 ， 如 加 粗 显 
示 、 变 色 、 缩 放 、 高 亮 背景 等 。 也 可 以 设计 当 鼠 标 经 过 时 增加 下 画 线 ， 因 为 下 画 线 具 有 很 好 的 提示 作用 。 
ahover {/# 鼠 标 经 过 时 显示 下 画 线 效果 类 
text-decoration:underline: 
} 


下 面 线 样式 不 仅仅 是 一 条 实 线 ， 可 以 根据 需要 自 定义 设计 。 主 要 设计 思路 如 下 : 

借助 <a> 标 签 的 底 边 框 线 来 实现 。 

利用 背景 图 像 来 实现 ， 背 景 图 像 可 以 设计 出 更 多 精巧 的 下 画 线 样 式 。 

【示例 1】 下 面 示例 设计 当 鼠 标 经 过 超 链接 文本 时 ， 显 示 为 下 男 虚线 、 字 体 加 粗 、 色 彩 高 亮 的 效 
果 ， 如 图 6.2 所 示 。 


<style type="text/css"> 
a {/* 超 链接 的 默认 样式 */ 
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text-decoration:none: 
color:#999: 


} 
a:hover {鼠标 经 过 时 样式 */ 


border-bottom:dashed 1px red: 
color:#000: 
font-weight:bold; 
Zoom:1; 
} 
</style> 
<ul class="p1"> 


<]i><a hre 住 "#" class="al"> 首 页 </a></li> 

<li><a hre 人 ="#" class="a2"> 新 闻 </a></li> 

<]i><a hre 住 "#" class="a3"> 微 博 </a></li> 
</ul> 


Csss 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


虚 清 除 超 链接 下面 线 */ 
户 浅 灰色 文字 效果 */ 


/*# 鼠 标 经 过 时 显示 虚 下 画 线 效 果 癌 
/* 加 重 颜色 显示 头 

谍 加 粗 字 体 显 示 */ 

话 解 决 正 浏览 器 无 法 显示 问题 */ 


【示例 2】 可 以 使 用 CSS3 的 border-bottom 属性 定义 超 链 接 文本 的 下 男 线 样式 。 下 面 示例 定义 超 
链接 始终 显示 为 下 男 线 效果 ， 并 通过 颜色 变化 来 提示 鼠标 经 过 时 的 状态 变化 ， 效 果 如 图 6.3 所 示 。 


<style type="text/css"> 

a {/* 超 链接 的 默认 样式 */ 
text-decoration:none: 
border-bottom:dashed 1px red: 
color:#666: 


zoom:1; 


} 

a:hover {/* 鼠 标 经 过 时 样式 所 
color:#000: 
border-bottom:dashed lpx #000; 


} 
</style> 


Xx 


http://localhostitest! ~ Bo 


图 6.2 定义 下 画 线 样式 (1) 


虚 清 除 超 链 接 下 面 线 */ 

/# 红 色 虚 下 画 线 效 果 状 

记 灰 色 字 体 效 果 */ 

放 解 决 正 浏览 器 无 法 显示 问题 */ 


记 加 重 颜 色 显示 */ 
/# 改 变 虚 下 画 线 的 颜色 六 


Xx 


(http://localhostiestz2 ~ Bo 


图 6.3 定义 下 男 线 样式 (2) 


【示例 3】 使 用 CSS3 的 background 属性 可 以 借助 背景 图 定义 更 精致 、 个 性 的 下 夯 线 样式 。 


【操作 步骤 】 


第 1 步 ， 使 用 Photoshop 设计 一 个 虚线 (images/dashed.psd)， 设 计 图 像 高 度 为 1px， 宽 度 为 4px、 


6px 或 8px。 有 具体 宽度 可 根据 虚线 的 疏 密 确定 。 


第 2 步 ， 在 Photoshop 中 ， 选 择 颜 色 以 跳 格 方式 进行 填充 ， 最 后 保存 为 GIF 格式 图 像 。 
第 3 步 ， 把 示例 2 另存 为 test3.htm1， 使 用 背景 图 代替 border-bottom:dashed 1px red: 声 明 ， 主 要 样 


式 代码 如 下 : 


<style type="text/css"> 
a {/* 超 链接 的 默认 样式 */ 
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text-decoration:none: 上 旋 清 除 超 链接 下 男 线 */ 
color:#666: 诺 灰 色 字 体 效果 */ 

} 

a:hover { 旋 鼠 标 经 过 时 样式 */ | 
color:#000: 人/# 加 重 颜色 显示 类 
/# 定 义 背 景 图 像 ， 定 位 到 超 链 接 元 素 的 底部 ， 并 沿 x 轴 水 平平 铺 */ 
backsground:url(imasges/dashed1l.glb left bottom repeat-x; Note 

} 

</style> 


第 4 步 ， 在 浏览 右 中 预览 ， 效 果 如 图 6.4 所 示 。 


图 6.4 背景 图 像 设 计 的 下 画 线 样式 
6.1.3 定义 特效 样式 


本 节 通过 示例 介绍 如 何 为 超 链接 文本 设计 立体 视觉 效果 ， 主 要 是 借助 边框 颜色 的 深浅 错落 , 模拟。 视频 讲解 
一 种 凸凹 变化 的 立体 效果 。 设 计 技巧 如 下 
回 ”设置 右边 框 和 底 边 框 同色 ， 同 时 设置 顶 边 框 和 左边 框 同色 ， 利 用 明暗 色彩 的 措 配 来 设计 立体 


效果 。 | 
回 ”设置 超 链接 文本 的 背景 色 为 深 色 效果 ， 营 造 凸 起 效果 ， 当 鼠标 移 过 时 ， 再 定义 浅 色 背景 来 营 


造 目下 效果 。 
四 ”为 网 页 设计 浅 色 背景 ， 再 定义 字体 颜色 来 烘托 立体 样式 。 
【示例 】 在 这 个 示例 中 ， 定 义 超 链 接 在 默认 状态 下 显示 灰色 右边 和 底 边 框 线 效果 、 白 色 顶 边 和 左 
边框 线 效 果 。 而 当 鼠 标 移 过 时 ， 则 清除 右 侧 和 底部 边框 线 ， 并 定义 左 侧 和 顶部 边框 效果 ， 演 示 效 果 如 
图 6.5 所 示 。 ] 
<style type="text/css"> | 
body {background:#fec:;} /* 浅 色 网 页 背景 */ 
ul {list-style-type: none;} /* 清 除 项 目 符 号 */ 
1 {margin: 0 2px: float: left:} /* 并 列 显 示 */ 


a {/* 超 链接 的 默认 样式 */ 
text-decoration:none; /# 清 除 超 链接 下 画 线 类 
border:solid 1px: /# 定 义 1px 实 线 边框 */ | 
padding: 0.4em 0.8em; 访 增 加 超 链 接 补 白 */ | 
color: #444: /# 定 义 灰 色 字 体 #/ 
background: #f99: /# 超 链接 背景 色 #/ 
border-color: #fff #aaab9c #aaab9c #fff: /# 分 配 边 框 颜色 类 
zoom:1; 诺 解 决 正 浏览 器 无 法 显示 问题 */ | 

} | 

a:hover {鼠标 经 过 时 样式 */ 
color: #800000: /# 超 链接 字体 颜色 部/ 
background: transparent: 放 清 除 超 链接 背景 色 */ 
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border-color: #aaab9c #ffF #fff #aaab9c: 上 诺 分 配 边框 颜 包 */ 


} 
</style> 


图 6.5 定义 立体 样式 


6.1.4 ”定义 光标 样式 
We 


| 在 默认 状态 下 ， 鼠 标 指针 经 过 超 链 接 时 显示 为 手 形 。 使 用 CSS 的 cursor 属性 可 以 改变 这 种 默认 
”效果 ，cursor 属性 定义 鼠标 移 过 对 象 时 的 指针 样式 ， 取 值 说明 如 表 6.1 所 示 。 


表 6.1 cursor 属性 取 值 说 明 


取 值 说 。 明 
auto 基于 上 下 文 决定 应 该 显示 什么 光标 
crosshair 十 字 线 光标 〈+) 
default 基于 平台 的 默认 光标 。 通 常 演 染 为 一 个 第 3 
Dointer 指针 光标 ， 表 示 一 个 超 链接 
move 十 字 第 头 光 标 ， 用 于 标示 对 象 可 被 移动 


e-resize 、ne-resize、nw-resize、n-resize、| 表示 正在 移动 某 个 边 ， 如 se-resize 光标 用 来 表示 框 的 移动 开始 于 东 


Se-Teslze、SW-IeslZe、S-Teslze、W-Ieslze | 南 角 


text 表示 可 以 选择 文本 。 通 常 演 染 为 I 形 光 标 

wait 表示 程序 正 忙 ， 需 要 用 户 等 待 ， 通 常 演 染 为 手表 或 沙漏 

help 光标 下 的 对 象 包 含 帮 助 内 容 ， 通 常 泻 染 为 一 个 问号 或 一 个 气球 
<uri>URL 自 定义 光标 类 型 的 图 标 路 径 


如 果 自 定义 光标 样式 。 使 用 绝对 或 相对 URL 指定 光标 文件 (后 缀 为 .cur 或 者 .ani)。 
【示例 】 下 面 示例 在 内 部 样式 表 中 定义 多 个 鼠标 指针 类 样式 ， 然 后 为 表格 单元 格 应 用 不 同 的 类 样 
完整 代码 可 以 参考 本 节 示 例 源 代码 ， 示 例 演示 效果 如 图 6.6 所 示 。 


<style> 

.auto {cursor: auto;} 

.default {cursor: default:} 

.none {cursor: none:} 
.context-menu {cursor: context-menu;} 
.help {cursor: help;} 

.pointer {cursor: pointer:;} 

.progress {cursor: progress;} 

.walt {cursor: wait;} 

.Cell {cursor: cell:} 

.crosshailr {cursor: crosshair:} 

.text {cursor: text:} 

.vertical-text {cursor: vertical-text:} 
.alias {cursor: alias;} 


.COpY {cursor: copy:} 


- 


式 
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.move {cursor: move;} 
.no-drop {cursor: no-drop;} 
.not-allowed {cursor: not-allowed:} 
.e-TeSlZe {cursor: e-resize;} 


.Dn-resize {cursor: n-resize;} 入 
.ne-resize {cursor: ne-resize;} | 
.DW-TeSlZe {cursor: nw-resize;} Note 


.S-TeSlZe {cursor: s-resize;} 
.Se-reslze {cursor: se-resilze;} 
.SW-reslze {cursor: sw-resilze;} 
.W-reslze {cursor: W-Teslze:} 
.ewW-reslze {cursor: ew-reslze;} 
.ns-resize {cursor: ns-resize;} 
.nesw-resilze {cursor: nesw-reslze;} 
.Wse-reslze {cursor: nWse-reslze;} 
.Col-resize {cursor: col-resize;} 
.IOW-reslze {cursor: row-resilze;} 
.all-scroll {cursor: all-scroll:} 
.Z00m-in {cursor: Zoom-in;} 
.Zoom-out {cursor: Zoom-out;} | 
Url {cursor: url(skin/cursor.gif), url(skin/cursor.png), url(skin/cursor.jpg), pointer:} 
</style> 


PE SS het focalhost est him i 
cursor 交 标 类 型 
auto none context-menu help pointer progress 


wait 中 crosshair text vertical-text alias copy 


move no-drop not-allowed e-resize n-tesize ne-resize nw-resize 
S-TESIZE Se-IESIZP SW-Ieslze W-IESIZe BTW-IeSIZe DS-ITESIZP nesW-reslze 


rnWwae-resize col-resize foOW-resize all-scroll url Zoom-tn zoom-out 


图 6.6 比较 不 同 光 标 样 式 效 果 


会 提示 : 使 用 自 定 义 图 像 作为 光标 类 型 ，IE 和 Opera 只 支持 *.cur 等 特定 的 图 片 格式 ; 而 Firefox、 
Chrome 和 Safari 既 支 持 特 定 图 片 类 型 ， 也 支持 常见 的 *.jpg、*.gif、*.jpg 等 图 片 格式 。 | 
cursor 属性 值 可 以 是 一 个 序列 ， 当 用 户 端 无 法 处 理 第 1 个 图 标 时 ， 它 会 尝试 处 理 第 2 个 、 
第 3 个 等 , 如 果 用 户 端 无 法 处 理 任何 定义 的 光标 , 则 必须 使 用 列表 最 后 的 通用 光标 . 例如 ， 
下 面 样式 中 就 定义 了 3 个 自 定义 动画 光标 文件 ， 最 后 定义 了 1 个 通用 光标 类 型 。 
a:hover {cursor:url(1mages/]1.an1’), url(i1mages/]1.cur’), url(images/]1.g1f), poimter:} 


6.2 设计 列表 样式 


下 面 介 绍 如 何 使 用 CSS3 设计 列表 的 基本 样式 。 
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讨 ”6.2.1 定义 项 目 符号 类 型 


使 用 CSS3 的 list-style-type 属性 可 以 定义 列表 项 目 符 号 的 类 型 ， 也 可 以 取消 项 目 符号 ， 该 属性 取 
” 值 说 明 如 表 6.2 所 示 。 


vote 表 6.2 liststyle-type 属性 值 


属 性 值 说 明 属 性 值 说 明 
disc 实心 圆 ， 默 认 值 upper-roman 大 与 罗马 数字 
circle lower-alpha 小 写 灿 文字 母 
Square upper-alpha 大 与 英文 字母 
decimal 不 使 用 项 目 符号 
lower-roman armenian 传统 的 亚美尼亚 数字 
cjk-ideographic 浅 白 的 表意 数字 georgian 传统 的 乔治 数字 
lower-greek 基本 的 希腊 小 母 hebrew 传统 的 希 伯 来 数字 
hiragana hiragana-iroha 日 文平 假名 序号 
katakana katalana iroha 日 文 片 假名 序号 
lower-latin upper-latin 大 与 拉丁 字母 
| 使 用 CSS3 的 list-style-position 属性 可 以 定义 项 目 符号 的 显示 位 置 。 该 属性 取 值 包括 outside 和 
inside, 其 中 outside 表示 把 项 目 符 号 显示 在 列表 项 的 文本 行 以 外 ,列表 符号 默认 显示 为 outside; inside 
”表示 把 项 目 符号 显示 在 列表 项 文本 行 以 内 。 


< 注意 : 如 果 要 清除 列表 项 目的 缩 进 显示 样式 ， 可 以 使 用 下 面 样式 实现 : 


ul,ol{ 
paddimg: 0; 
margin: 0; 
} 
【 示例】 下面 示 例 定义 项 目 符号 显示 为 空心 圆 ， 并 位 于 列表 行内 部 ， 如 图 6.7 所 示 。 

<style type="text/css"> 
body {/* 清 除 页 边 距 */ 

margin: 0; 此 清除 边界 */ 

padding: 0: /# 清 除 补 白光 / 
} 
ul {l#* 列 表 基 本 样式 煌 

list-style-type: circle: 诺 空 心 圆 符号 */ 

list-style-position: inside: 上 显示 在 里 面 */ 
} 
</style> 
<ul> 

<]i><a hre 伍 "#"> 关 于 我 们 </a></li> 

<]i><a hre 伟 "如 > 版 权 信 息 </a></1i> 

<]i><a hre 舍 "如 > 友情 链接 </a>< 人 > 
</ul> 
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全 提示 : 在 定义 列表 项 目 符号 样式 时 ， 应 注意 以 下 两 点 : 


(1 ) 不 同 浏览 器 对 于 项 目 符号 的 解析 效果 及 其 显示 位 置 咯 有 不 同 。 如 果 要 兼容 不 同 浏览 


(2 ) 项 目 符号 显示 在 里 面 和 外 面 会 影响 项 目 符号 与 列表 文本 之 间 的 距离 ， 同 时 影响 列表 


项 的 缩 进 效果 。 不 同 浏览 器 在 解析 时 会 存在 差异 。 


6.2.2 ”定义 项 目 符号 图 像 


使 用 CSS3 的 list-style-image 属性 可 以 目 定义 项 目 符号 。 该 属性 允许 指定 一 个 外 部 图 标 文件 ， 以 


此 满足 个 性 化 设计 需求 。 用 法 如 下 : 
list-style-1mage: none | <url> 


默认 值 为 none。 


【示例 】 以 6.2.1 节 示例 为 基础 ， 重 新 设计 内 部 样式 表 ， 增 加 自 定义 项 目 符号 ， 设 计 项 目 符号 为 ~ 


外 部 图 标 bullet main 02.gif， 效 果 如 图 6.8 所 示 。 
<style type="text/css"> 


ul {* 列 表 基 本 样式 */ 
list-style-type: circle: /# 空 心 圆 符号 所 
list-style-position: inside: 谍 显 示 在 里 面 */ 
list-style-image: url(images/bullet_main 02.gifj; 。 。”/* 自 定义 列表 项 目 符 号 */ 

} 

</style> 


图 6.8 自 定 义 列表 项 目 符号 


会 提示 : 当 同 时 定义 项 目 符号 类 型 和 自 定义 项 目 符号 时 ， 自 定义 项 目 符号 将 覆盖 默认 的 符号 类 型 。 
但 是 如 果 list-style-type 属性 值 为 none 或 指定 的 外 部 图 标 文件 不 存在 时 ， 则 list-style-type ， 


属性 值 有 效 。 
6.2.3 ”模拟 项 目 符号 
使 用 CSS3 的 background 属性 也 可 以 模拟 列表 项 目的 符号 ， 设 计 技巧 如 下 : 
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(1) 使 用 list-style-type:none 隐藏 列表 的 默认 项 目 符 号 。 

(2) 使 用 background 属性 为 列表 项 目 定义 背景 图 像 ， 精 确定 位 其 显示 位 置 。 

(3) 使 用 padding-left 属性 为 列表 项 目 定义 左 侧 空白 ， 避 免 背景 图 被 项 目 文本 遮盖 。 

会 内 【示例 】 在 下 面 示例 中 ， 先 清除 列表 的 默认 项 目 符号 ， 然 后 为 项 目 列表 定义 背景 图 像 ， 并 定位 到 
一 左 侧 垂直 居中 的 位 置 ， 为 了 避免 列表 文本 履 盖 背 景 图 像 ， 定 义 左 侧 补 白 为 一 个 字符 宽度 ， 这 样 就 可 以 
中 [03 对 把 列表 信息 向 右 缩 进 显 示 ， 显 示 效 果 如 图 6.9 所 示 。 


<style type="text/css"> 
ul { 必 清 除 列表 的 默认 样式 */ 
list-style-type: none: 
padding: 0; 
margin: 0; 
} 
li fl# 定 义 列 表 项 目的 样式 类 
background-image: url(images/bullet sarrow.gif): * 定 义 背 景 图 像 */ 
background-position: left center; 放 精 确定 位 背景 图 像 的 位 置 */ 
background-repeat: no-repeat: /# 禁 止 背景 图 像 平 铺 显示 类 
padding-left: lem: 诺 为 背景 图 像 挤 出 空白 区 域 */ 
} 
</style> 


X 
| EE http://localhost/testt ~ 虽 上 | 
s ys yj 


图 69 使 用 背景 图 模拟 项 目 符号 
63 案例 实战 


下 面 通 过 多 个 案例 演示 如 何在 具体 页 面 中 设计 超 链 接 和 列表 的 样式 。 
6.3.1 设计 图 形 按钮 链接 


| 超 链接 可 以 显示 为 多 种 样式 ， 如 动 男 、 按钮 、 图 像 、 特 效 等 ， 本 节 介 绍 如 何 设计 图 形 化 按钮 样式 。 
”这 可 以 使 用 CSS 的 background-image 属性 实现 。 
【示例 1】 下 面 示例 用 背景 图 像 蔡 换 超 链接 文本 ， 设 计 图 形 按钮 效果 ， 如 图 6.10 所 示 。 


<style type="text/css"> 


a.reg {/* 超 链接 样式 */ 
background: transparent url(images/btn2.gif) no-repeat top left; /* 背 景 图 像 */ 
display: block: /# 抉 状 显示 ， 方 便 定义 宽度 和 高 度 #/ 
width:74px: /# 宽 度 ， 与 背景 图 像 同 宽 状 
height: 25px: 诺 高 度 ， 与 背景 图 像 同 高 */ 
text-indent:-999px: /* 隐 藏 超 链接 中 的 文本 类 

} 
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</style> 


<a class="reg"” hre 人 ="#"> 注 册 </a> 


在 上 面 代码 中 ， 使 用 background-repeat 防止 背景 图 重复 平 铺 ; 定义 <a> 标 签 以 块 状 或 者 行内 块 状 | 
显示 , 以 方便 为 超 链 接 定 义 高 和 宽 ; 在 定义 超 链接 的 显示 大 小 时 , 其 宽 和 高 最 好 与 背景 图 像 保 持 一 致 ， 


也 可 以 使 用 padding 属性 撑 开 <a> 标 签 ， 以 代替 width 和 height 属性 声明 ; 使 用 text-indent 属性 隐藏 超 
链接 中 的 文本 。 


< 全 注意 : 如 果 超 链接 区 域 比 背景 图 大 ， 可 以 使 用 background-position 属性 定位 背景 图 像 在 超 链接 中 


的 显示 位 置 。 


【示例 2】 下 面 示例 为 超 链 接 不 同 状 态 定义 不 同 背 景 图 像 : 在 正常 状态 下 ， 超 链接 左 侧 显示 一 个 | 
租 头 式 的 背景 图 像 ， 当 鼠 标 移 过 超 链 接 时 ,背景 图 像 被 蔡 换 为 男 一 个 动态 GIF 图 像 , 使 整个 超 链接 动 


态 效 果 立 即 显 示 出 来 ， 演 示 效 果 如 图 6.11 所 示 。 


<style type="text/css"> 

a.reg {/* 定 义 超 链接 正常 样式 ， 定位 左 侧 背 景 图 像 */ 
background: url("i1mages/arrow2.g1f") no-repeat left center:; 
padding-left: 14px; 


} 

a.reg:hover {/* 定 义 鼠 标 经 过 时 超 链接 样式 定位 左 侧 背景 图 像 */ 
background: url("images/arrow].g1f") no-repeat left center:; 
padding-left: 14px: 

} 

</style> 

<a class="reg"” hre 伍 "#"> 注 册 </a> 


各 > 碟 http://localhost/test2 Ma 


图 6.10 ”图形 化 按钮 样式 图 6.11 动态 背景 样式 
在 上 面 代 码 中 ， 通 过 padding-left 属性 定义 超 链接 左 侧 空 际 ， 这 样 就 可 以 使 定义 的 背景 图 显示 出 


来 ， 避 人 免 被 链接 文本 所 遮 新 。 实 战 中 ， 经 常 需 要 使 用 padding 属性 来 为 超 链接 增加 空余 的 空间 ， 以 便 ， 


背景 图 像 能 够 很 好 地 显示 出 来 。 
6.3.2 设计 背景 浓 动 样式 


使 用 CSS 滑动 门 技术 可 以 设计 宽度 可 伸缩 的 超 链 接 样式 。 所 谓 滑动 门 ， 就 是 通过 两 个 背景 图 像 


的 合 加 ， 来 创造 一 些 可 上 自由 伸 纵 的 背景 效果 。 
【操作 步骤 】 


第 1 步 ， 使 用 Photoshop 设计 好 按钮 图 形 的 效果 图 ， 然 后 分 切 为 两 截 ， 其 中 一 截 应 尽 可 能 短 ， 只 包 


括 一 条 椭圆 边 ， 男 一 截 可 以 尽 可 能 长 ， 这 样 设计 的 图 形 按钮 就 可 以 容纳 更 多 的 字符 ， 如 图 6.12 所 示 。 


图 6.12 ”绘制 并 裁 切 请 动 门 背景 图 
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第 2 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 以 下 代码 ， 构 建 
一 个 可 以 定义 重 登 背景 图 的 超 链 接 结构 ， 在 每 个 超 链接 <a> 标 签 中 包含 一 个 <span> 辅 助 标签 。 


hre 传 "#"><span> 按 钮 </span></a> 

hre 伟 "#"><span> 超 链接 </span></a> 

hre 舍 "加 ><span> 图 像 按 钮 </span></a> 
href="#"><span> 扩 展 性 按钮 </span></a> 

hre 伍 "#"><span> 能 够 定义 很 多 字数 的 文本 链接 </span></a> 


第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 


SSHAHA 


样式 。 使 用 CSS 把 短 的 背景 图 (leftl.gif) 固定 在 <a> 标 签 的 左 侧 。 


a {/* 定 义 超 链接 样式 */ 
background: url(imasges/leftl.gif) no-repeat top left: 旋 把 短 截 背 景 图 像 固 定 在 左 侧 */ 
display: block: 诺 以 块 状 显 示 ， 这 样 能 够 定义 大 小 */ 
float:left: /# 浮 动 显 示 ， 这 样 a 元 素 能 够 自动 收缩 宽度 ， 以 正好 包容 文本 */ 
padding-left: 8px: 谍 增 加 左 侧 内 边 距 ， 该 宽度 正好 与 上 面 定 义 的 背景 图 像 同 宽 */ 
font: bold 13px Arial; 上 话 超 链接 文本 字体 属性 */ 
line-height: 22px: 诺 定 义 行 高 */ 
height: 30px; 诺 定 义 按钮 高 度 */ 
color: white: /# 字 体 颜 色 烛 
margin-left:6px; 诺 左 侧 外 边框 */ 
text-decoration:none: 上 谍 清 除 默 认 的 下 男 线 样式 */ 

} 

第 4 步 ， 把 长 的 背景 图 (rightl.gif) 固定 在 <span> 标 签 的 右 侧 。 

aspan { 
background: url(images/rightl.gif) no-repeat top right;t 。”/* 定 义 长 截 背景 图 像 */ 
display: block: 诺 块 状 显 示 */ 
padding: 4px 10px 4px 2px: 谍 增 加 内 边 距 */ 

} 


第 5 步 ， 在 浏览 器 中 预先 ， 显 示 效 果 如 图 6.13 所 示 。 如 果 锅 望 鼠 标 经 过 时 背景 图 像 的 色彩 稍稍 


“有 点 变化 ， 以 增加 按钮 的 动态 感 ， 不 妨 在 鼠标 经 过 时 增加 一 个 下 画 线 效果 。 


a:hover {text-decoration: underline;} 


Xx, 


过 > 后 http:/ilocalhost/mysite/test 只 EG 全 六 3 


图 6.13 设计 滑动 门 链接 效果 


6.3.3 设计 背景 交换 样式 


本 例 设计 两 幅 大 小 相同 、 效 果 不 同 的 背景 图 像 ， 然 后 使 用 CSS 进行 轮换 显示 ， 设 计 一 种 简单 的 


”鼠标 动画 效果 。 


【操作 步骤 】 
第 1 步 ， 使 用 Photoshop 设计 两 幅 大 小 相同 ， 但 效果 略 不 同 的 图 像 ， 如 图 6.14 所 示 。 
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bgl.sif bg2.gif 


图 6.14 设计 背景 图 像 


第 2 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 testl.html， 在 <body> 标 签 内 输入 以 下 代码 , 构 ， 


建 一 个 列表 结构 。 


<ul> 
<]i><a hre 伍 "#"> 首 页 </a></li> 
<]i><a hre 伍 "#"> 新 闻 </a></li> 
<]i><a hre 住 "#"> 微 博 </a></li> 


</ul> 
第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 ， 
样式 

a {/* 超 链接 的 默认 样式 */ 
text-decoration:none: 翌 清 除 默 认 的 下 画 线 妆 
display:inline-block: 诺 行 内 块 状 显 示 */ 
padding:2px lem: 谍 为 文本 添加 补 白 效果 */ 
height:28px: /# 固 定 高 度 状 
line-height:32px: /# 行 高 等 于 高 度 ， 设 计 垂 直 居 中 类 
text-allign:centerT: 启 文 本 水 平 居 中 */ 
background:url(images/b1.gif) no-repeat center: /# 定 义 背 景 图 像 |， 禁止 平 铺 ， 居 中 */ 
color:#ccce: 话 浅 灰色 字体 */ 


} 

a:hover {/# 鼠 标 经 过 时 样式 #/ 
background:url(images/b2.gif) no-repeat center: 定义 背景 图 像 2?， 禁 止 平 铺 ， 居 中 */ 
color:#ffF: 诺 白 色 字 体 */ 

} 


在 上 面 样式 代码 中 ,， 先 定义 超 链接 以 行内 块 状 显示 ， 这 样 便于 控制 它 的 宽 和 高 ， 然 后 根据 背景 图 ， 


像 大 小 定义 a 元 素 的 大 小 ， 并 分 别 为 默认 状态 和 鼠标 经 过 状态 定义 背景 图 像 。 


超 链接 的 宽度 可 以 不 必 等 于 背景 图 像 的 宽度 ， 只 要 小 于 背景 图 的 宽度 即 可 。 但 是 高 度 必 须 保 持 与 


背景 图 像 的 一 致 。 在 设计 中 可 以 结合 背景 图 像 的 效果 定义 字体 颜色 。 
第 4 步 ， 在 浏览 器 中 预 完 ， 所 得 的 超 链接 效果 如 图 6.15 所 示 。 


二 3 http:y/localhostrtestl ~ 0 


图 6.15 背景 图 交换 链接 效果 


全 提示 : 为 了 减少 两 幅 背 景 图 像 的 HTTP 请 求 次 数 ， 避 免 占用 不 必要 的 带宽 ， 可 以 把 用 于 交换 的 两 
幅 图 像 合 并 为 一 幅 图 像 ， 然 后 利用 CSS 定位 技术 控制 背景 图 像 的 显示 区 域 ， 详细 代 码 请 


参考 本 节 示 例 源码 文件 中 的 test2.html。 


i 


vote 


Csss 网 页 设计 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


汪汪”6.3.4 设计 水 平滑 动 菜单 


CSS 滑动 门 的 形式 有 两 种 : 水 平滑 动 和 垂直 滑动 。6.3.2 节 简 单 演 示 了 图 像 滑动 的 基本 方法 ， 本 
“ 节 在 此 基础 上 介绍 更 复杂 的 案例 。 


站 本 

第 1 步 ， 设 计 “ 门 ?>。 这 个 门 实际 上 就 是 背景 图 ， 滑 动 门 一 般 至 少 需要 两 幅 背 景 图 ， 以 实现 闭合 成 
， 门 的 设计 效果 ， 本 例 则 完全 采用 一 幅 背 景 图 像 ， 一 样 能 够 设计 出 滑动 门 效 果 ， 如 图 6.16 所 示 。 考 虑 
”到 门 能 够 适应 不 同 尺寸 的 菜单 ， 所 以 背景 图 像 的 宽度 和 高 度 应 该 尽量 大 ， 这样 就 可 以 保证 比较 大 的 灵 
' 活性。 


图 6.16 设计 滑动 门 背 景 图 

第 2 步 ， 设 计 “ 门 轴 ”。 至 少 需要 两 个 元 素 配 合 使 用 才能 使 门 目 由 推拉 。 背 景 图 需要 安装 在 对 应 的 
| 门 轴 之 上 才能 够 自由 推拉 ， 从 而 呈现 滑动 效果 。 一 般 在 列表 结构 中 ， 可 以 将 <li> 和 <a> 标 签 配合 使 用 。 
第 3 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 编写 如 下 列表 结构 ， 
”由 于 每 个 菜单 项 字数 不 尽 相 同 ， 使 用 滑动 门 来 设计 效果 会 更 好 。 
<ul 1d="menu"> 

<]i><a hre 伍 "#" title=""> 首 页 </a></li> 

<]i><a hre 伍 "#" title=""> 微 博 圈 </a></li> 

<]i><a hre 伍 "#" title=""> 移 动 开发 </a></li> 

<]i><a hre 伍 "#" title=""> 编 程 与 设计 </a></li> 

<]i><a hre 伍 "#" title=""> 程 序 员 与 语言 </a></li> 

<]i><a hre 伍 "#" title=""> 编 程 语 言 排行 榜 </a></li> 


</ul> 
| 第 4 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 准备 编写 
| 样式。 


第 $ 步 ， 整 理 设计 思路 : 

回 ”在 下 面 亚 放 的 标签 (<li>) 中 定义 如 图 6.16 所 示 的 背景 图 ， 并 定位 左 对 齐 ， 使 其 左 侧 与 <li> 
标签 左 侧 对 齐 。 

加 ”在 上 面 辣 放 的 标签 (<a>) 中 设置 相同 的 背景 图 ,使 其 右 侧 与 <a> 标 签 的 右 侧 对 齐 ， 这 样 两 个 
背景 图 像 就 可 以 重 夺 在 一 起 。 

| 第 6 步 , 为 了 避免 上 下 重 倒 元 素 的 背景 图 相互 挤 压 ， 导 致 菜单 项 两 端的 圆 角 背景 图 被 覆盖 ， 可 以 

”为 < 这 标签 左 侧 和 <a> 标 签 右 侧 增 加 补 白 (padding)， 以 此 限制 两 个 元 素 不 能 覆盖 两 端 圆 角 背 景 图 。 

第 7 步 ， 根 据 第 $ 步 和 第 6 步 的 设计 思路 ， 动 手 编写 如 下 CSS 样式 代码 : 


#menu {/* 定 义 列表 样式 */ 
background: url(images/bg1 .gif) #fff: 诺 定 义 导 航 菜 单 的 背景 图 像 */ 
padding-left: 32px: 诺 定 义 左 侧 的 补 白 */ 
margin: Opx; 诺 清 除 边 界 */ 
list-style-type: none: 旋 清 除 项 目 符 号 */ 
height:35px: /# 固 定 高 度 ， 否 则 会 自动 收缩 为 0*/ 
a li {x* 定 义 列表 项 样式 */ 
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float: left: /# 回 左 浮动 站 
margin:0 4px: /# 增 加 菜单 项 之 间 的 距离 妆 
padding-left:18px: 上 定义 左 补 白 ， 避 人 免 左 侧 圆 角 窗 新 */ 


backeground:url(1mages/menu4.g1f) left center repeat-x; 计 定 义 背 景 图 ， 左 对 齐 */ 


} 鲜 
| NN 


#menu li a {/* 定 义 超 链接 默认 样式 */ 


padding-right: 18px: 诺 定 义 右 补 白 ， 与 左 侧 形成 对 称 */ 
float: left: 诺 回 左 浮动 */ 
height: 35px: 谍 固 定 高 度 */ 
color: #bbb: /# 定 义 百 分 比 宽度 ， 实 现 与 1 同 宽 状 
line-height: 3Spx: 上 # 定 义 行 高 ， 间 接 实现 垂直 对 齐 状 
text-align: center: 诺 定 义 文本 水 平 大 中 */ 
text-decoration: none: 上 访 清 除 下 男 线 效果 */ 
background:url(images/menu4.gif) right center repeat-x;: ”/* 定 义 背 景 图 像 */ 

} 

#menu li a:hover {/* 定 义 鼠 标 经 过 超 链 接 的 样式 */ 
text-decoration:underline: 访 定 义 下 辆 线 */ 
color: #fff 诺 白 色 字 体 */ 

} 


第 8 步 ， 保 存 页 面 ， 在 浏览 器 中 预 和 狗 ， 演 示 效 果 如 图 6.17 所 示 。 


图 6.17 水 平滑 动 菜 单 
6.3.5 设计 垂直 滑动 菜单 


6.3.3 节 介 绍 了 背景 图 像 的 重 直 交换 样式 ， 但 是 单纯 的 垂直 滑动 存在 一 个 弱点 : 如 果菜 单项 字数 
不 同 〈 菜 单项 宽度 不 同 )， 那 么 就 需要 考虑 为 不 同 宽度 的 全 单项 设计 背景 图 ， 这 样 就 比较 及 烦 。 解 决 
方法 为 : 将 水 平和 垂直 滑动 融合 在 一 起 ， 设 计 菜 单项 能 自由 适应 高 度 和 宽度 的 变化 。 | 


【操作 步骤 】 
第 1 步 , 设计 背景 图 ， 如 图 6.18 所 示 。 然 后 将 两 幅 背 景 图 拼合 在 一 起 ， 形 成 滑动 的 门 ， 如 图 6.19 ， 
所 示 。 
图 6.18 设计 滑动 背景 图 图 6.19 ”拼合 滑动 背景 图 


第 2 步 ， 完 善 HTML 结构 ， 在 超 链接 (<a> ) 内 再 包 庄 一 层 标 签 (<span> )。 局 动 Dreamweaver， 
新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 编写 如 下 列表 结构 。 
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<h1> 滑 动 门 <hl> 

<Ul 1d="menu"> 
<]i><a hre 住 "#" title=""><span> 首 页 </span></a></li> 
<]i><a hre 伍 "#" title=""><span> 人 和 做 博 圈 </span></a></li> 
<li><a hre 伍 "#" title="><span> 移 动 开发 </span></a></li> 
<li><a href="#" tile="><span> 编 程 与 设计 </span></a></li> 
<]i><a hre 伍 "#" title=""><span> 程 序 员 与 语言 </span></a></li> 
<]i><a hre 伍 "#" title=""><span> 编 程 语言 排行 榜 </span></a></li> 


</ul> 


第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 准 备 编写 样式 。 
第 4 步 ， 设 计 CSS 样式 代码 ， 可 参考 6.3.4 节 示 例 样式 代码 ， 把 <li> 标 签 的 背景 样式 转 给 <span> 


标签 即 可 ， 详 细 代码 如 下 ; 


#menu {/* 定 义 列表 样式 */ 
backeround: url(1mages/bg]1 .gf) #fff: 
padding-left: 32px: 
margin: Opx; 
list-style-type: none: 
height:35px:; 
. 
#menu li {/* 定 义 列表 项 样式 */ 
float: left: 
margin:0 4pX: 
} 
#menu span {l* 定 义 超 链接 内 包含 元 素 span 的 样式 */ 
float:left: 
padding-left: ] 8px: 
background:url(1mages/menu4.gif) left center repeat-x; 


} 
#menu lia {/* 定 义 超 链接 默认 样式 */ 
padding-right: 18px; 
float: left: 
height: 35px; 
color: #bbb: 
line-height: 35px; 
text-align: center:; 
text-decoration: none: 
background:url(i1images/menu4.g1f) night center Tepeat-X: 


} 

#menu li a:hover {/* 定 义 鼠 标 经 过 超 链 接 的 样式 */ 
text-decoration:underline:; 
color: 振作 

} 


诺 定 义 导 航 菜 单 的 背景 图 像 */ 

诺 定 义 左 侧 的 补 白 */ 

话 清 除 边 界 */ 

诺 清 除 项 目 符 号 */ 

/# 固 定 高 度 ， 否 则 会 自动 收缩 为 0*/ 


谍 同 左 浮动 */ 
放 增 加 菜单 项 之 间 的 距离 */ 


诺 疝 左 浮动 */ 
上 # 定 义 左 补 白 ， 避 免 堪 侧 被 覆盖 状 
/# 定 义 背 景 图 ， 左 对 齐 #/ 


诺 定 义 右 补 白 ， 与 左 侧 形成 对 称 */ 
旋回 左 浮动 */ 

话 固 定 高 度 */ 

诺 定 义 百 分 比 宽度 ， 实 现 与 1 同 宽 */ 
/# 定 义 行 高 ， 间 接 实现 垂直 对 齐 #/ 
诺 定 义 文本 水 平 居 中 */ 

/*# 清 除 下 画 线 效果 所 

/# 定 义 背 景 图 像 志 


此 定 义 下 男 线 */ 
户 白 色 子 体 */ 


第 5 步 ， 第 4 步 样式 代码 仅 完 成 了 水 平滑 动 效果 ， 下 面 需要 修改 部 分 样式 ， 设 计 当 鼠标 经 过 时 的 


”滑动 效果 ， 把 如 下 样式 : 


#menu li a:hover {/* 定 义 鼠 标 经 过 超 链接 的 样式 */ 
text-decoration:underline: 
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诺 定 义 下 面 线 */ 
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color: #fff 诬 白 色 字 体 */ | 

} | 

修改 为 如 下 样式 : | 

#menu a:hover {/* 定 义 鼠 标 经 过 超 链接 的 样式 */ | 会 | 
color: #fff: 鼎 白 色 字 体 */ Mii 
background:url(images/menu5.gif) right center repeat-x; 。 /* 定 义 滑动 后 的 背景 图 像 */ | Note ote 

} 


#menu a:hover span {/* 定 义 鼠 标 经 过 超 链接 的 样式 */ 
background:url(images/menuS.gif) left center repeat-x; /# 定 义 滑 动 后 的 背景 图 像 #/ | 


cursor:pointer; 证 定义 鼠标 经 过 时 显示 手 形 指针 */ | 
cursor:hand; /# 早 期 正 版 本 下 显示 为 手 形 指针 状 


) | 
第 6 步 ， 保 存 页 面 之 后 ， 在 浏览 器 中 预览 ， 则 演示 效果 如 图 6.20 所 示 。 | 


Ca = 碟 http://localhost/mysite/test.html PPD-o 乱 列表 布局 X 
| 


图 6.20 水平 与 牌 直 滑 动 菜 单 | 


安 提示 : 如 果 使 用 CSS3 动画 技术 ， 添 加 如 下 两 个 样式 ， 可 以 更 逼真 地 演示 重 直 滑动 的 动画 效果 ， 
(test3.html ) ， 相 关 技 术 的 详细 讲解 可 以 参考 后 面 章 节 内 容 。 | 


#menu span {transition: all .3s ease-1n;} 
#menu li a {transition: all .3s ease-1n;} 
| 


6.3.6 设计 Tab 选项 面板 


Tab 在 栏目 面板 中 比较 常用 ， 因 为 它 能 够 在 有 限 的 空间 内 包含 更 多 分 类 信息 ， 适 合 商业 网 站 的 版 。 视频 讲 
面 集成 设计 。 

设计 思路 : 利用 CSS 隐藏 或 显示 栏目 的 部 分 内 容 ， 实 际 Tab 面板 所 包含 的 全 部 内 容 都 已 经 下 载 
到 客户 端 浏览 器 中 。 一 般 Tab 面板 仅 显 示 一 个 Tab 菜单 项 ， 当 用 户 选 择 对 应 的 菜单 项 之 后 ， 才 会 显示 
对 应 的 内 容 。 

【操作 步骤】 

第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 testhtml1， 在 <body> 标 签 内 编写 如 下 结构 ， 构 建 | 
HTML 文档 。 | 


<div 1d="tab"> 
<div class="Menubox"> | 
<ul> 
<liid="tab 1" class="hover" onclick="setTab(1,4)"> 明 星 </li> 
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<]i id="tab 2" onclick"setTab(2,4)"> 搞 笑 </li> 
<]iid="tab 3" onclick="setTab(3,4)"> 美 女 </li> 
<]iid="tab 4" onclick"setTab(4,4)"> 摄 影 </li> 
</ul> 
</div> 
<div class="Contentbox"> 
<div 1d="con 1" class="hover" ><Img src="1mages/l1.png" /></div> 
<div 1d="con 2" class="hide"><1img src="i1mages/2.png" /></div> 


<div 1d="con 3" class="hide"><1mg src="i1mages/3.png" /></div> 
<div 1d="con 4" class="hide"><1img src="i1mages/4.png" /></div> 
</div> 
</div> 


在 Tab 面板 中 ，<div class="Menubox"> 框 包含 的 内 容 是 菜单 栏 ，<div class="Contentbox"> 框 包含 


”的 是 面板 内 容 。 


第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 内 部 样式 表 ， 准 备 编写 样式 。 
第 3 步 ， 定 义 Tab 菜单 的 CSS 样式 。 这 里 包含 3 部 分 CSS 代码 : 第 1 部 分 重 置 列表 框 、 列 表 项 


”和 超 链接 默认 样式 , 第 2 部 分 定义 Tab 选项 卡 基本 结构 , 第 3 部 分 定义 与 Tab 菜单 相关 的 几 个 类 样式 。 


”详细 代码 如 下 : 

谍 页 面 元 素 的 默认 样式 */ 

a {/* 超 链接 的 默认 样式 */ 
color:#00F: 谍 定 义 超 链接 的 默认 颜色 */ 
text-decoration:none: /# 清 除 超 链接 的 下 男 线 样式 类 

ahover {color: 执 00;}/# 鼠 标 经 过 超 链接 的 默认 样式 状 

ul {必定 义 列表 结构 基本 样式 */ 
list-style:none: 上 话 清 除 默 认 的 项 目 符号 */ 
padding:0; 谍 清 除 补 白 */ 
margin:Opx; 访 清 除 边界 */ 
text-align:center; 诺 定 义 包含 文本 居中 显示 */ 

} 

访 选 项 卡 结构 */ 

#tab {/* 定 义 选 项 卡 的 包含 框 样式 */ 
width:920px: 诺 定 义 Tab 面板 的 宽度 */ 
margin:0 auto: 谍 定 义 Tab 面板 居中 显示 */ 
font-size: 12px: /# 定 义 Tab 面板 的 字体 大 小 */ 
overflow:hidden: 上 访 隐 藏 超出 区 域 的 内 容 */ 

} 

/# 沫 单 样式 类 各 

.Menubox {/*Tab 菜单 栏 的 类 样式 */ 
width:100%; 此 定义 宽度 ， 满 包含 框 宽度 显示 */ 
background:url(images/tab]1.gif): /# 定 义 Tab 菜单 栏 的 背景 图 像 */ 
height:28px; 此 固定 高 度 */ 
line-height:28px: /# 定 义 行 高， 实现 垂直 居中 显示 状 

} 


.Menubox ul fmargin:0px: padding:0px:;}/* 清 除 列表 缩 进 样式 */ 
.Menubox li {/*Tab 菜单 栏 包含 的 列表 项 基本 样式 类 
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float:left: 诺 回 左 浮动 ， 实 现 并 列 显 示 */ 
display:block: /# 块 状 显示 所 
cursor:pointer: 上 # 定 义 手 形 指针 样式 类 
width: 114px: 诺 固 定 宽度 */ 
text-align:center:; 此 定 义 文本 居中 显示 */ 和 
color:#949694: 认 字 体 颜色 hi 
font-weight:bold: 谍 加 粗 字 体 */ 
} 
.Menubox li 1mg {width:100%:} 
.Menubox li.hover {/* 鼠 标 经 过 列表 项 的 样式 类 关 
padding:0px: /# 清 除 补 白 妆 
background:#fff: 让 加 亮 背 景色 */ 
width:116px: /固定 宽 度 显示 癌 
border:1px solid #A8C29F: /# 定 义 边框 线 #/ 
border-bottom:none: 话 清 除 底 边 框 线 样式 */ 
background:url(images/tab2.gif): 放 定 义 背 景 图 像 */ 
color:#739242; 族 定 义 字 体 颜色 */ 
height:27px:; 记 固 定 高 度 */ 
line-height:27px: 上/# 定 义 行 高 ， 实 现 文本 垂直 居中 状 
} 
.Contentbox {/* 定 义 Tab 面板 中 内 容 包 含 框 基本 样式 类 */ 
clear:both: 上 旋 清 除 左右 浮 动 元 素 */ 
margin-top:Opx; 放 清 除 项 边界 */ 
border: 1px solid #A8C29F: 记 定 义 边框 线 样式 */ 
border-top:none: 记 清 除 顶 部 边框 线 样式 */ 
padding-top:8px: 谍 定 义 顶 部 补 白 ， 增 加 距离 */ 
} 
.hide {display:none; /* 隐 藏 元 素 显 示 */} 人 # 隐 藏 样式 类 #/ 


第 4 步 ， 使 用 JavaScript 设计 Tab 交互 效果 。 
下 面 图 数 定 义 了 两 个 参数 ， 第 一 个 参数 定义 要 隐藏 或 显示 的 面板 ， 第 二 个 参数 定义 当前 Tab 面板 
包含 几 个 Tab 选项 卡 ， 并 定义 当前 选项 卡 包含 的 列表 项 的 类 样式 为 hover， 最 后 为 每 个 Tab 沫 单 中 的 
1 元 素 调用 该 函数 即 可 ， 从 而 实现 单 击 对 应 的 沫 单项 ， 即 可 目 动 激活 该 脚本 函数 ， 并 把 当前 列表 项 的 
类 样式 设置 为 hover， 同 时 显示 该 菜单 对 应 的 面板 内 容 ， 而 隐藏 其 他 面板 内 容 。 有 关 JavaScript 语言 | 
的 详细 讲解 可 以 参考 后 面 章节 内 容 。 
<script> 
function setTab(cursel,n){ 
for(=1;1<=n;1++){ 
var menu=document.getElementById("tab "+1): 
var con=document.getElementByld("con "+1); 
menu.className=1==cursel?"hover":""; 
con.style.display=1==cursel?"block":"none"; 
} 
} 
</script> 
第 5 步 ， 保 存 页 面 之 后 ， 在 浏览 器 中 预览 ， 则 演示 效果 如 图 6.21 所 示 。 
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图 6.21 Tab 面板 菜单 效果 


下 拉 式 面板 比较 特殊 ， 当 鼠标 移 到 沫 单项 目 上 时 将 自动 弹出 一 个 下 拉 的 大 面板 , 在 该 面板 中 显示 

”各 种 分 类 信息 。 这 种 版 式 在 电 疝 类 型 网 站 中 应 用 比较 多 。 

| 设计 思路 : 在 超 链 接 〈<a> 标 签 ) 内 包含 面板 结构 ， 当 鼠标 移 过 超 链接 时 ， 目 动 显示 这 个 面板 ， 
而 在 默认 状态 隐藏 其 显示 。 由 于 早期 正 浏览 器 对 <a> 标 签 包含 其 他 结构 的 解析 存在 问题 ， 设 计时 应 适 


， 当 考虑 兼容 问题 。 
【操作 步骤 】 


第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 编写 如 下 结构 ， 构 建 
HTML 文档 。 


<ul 1d= "lists"> 
<]i><a hre 传 " 操 ' class="tl"> 商 品 导 购 

<!--Lf IE 7]><!--></a><!--<![endif]--> 

<!--[1f lte IE 6]><table><tr><td><![endif|--> 

<div class="pos1"> 

<dl 1d="menu"> 
<d 人 > 产品 大 类 </dt> 

<dd><a hre 仁 "#" title=""> 图 书 、 音 像 、 数 字 商 品 </a></dd> 
<dd><a hre 伍 '#" title=""> 家 用 电器 </a></dd> 
<dd><a hre 伍 "#" title=""> 和 手机、 数码 、 京 东 通 信 预 约 </a></dd> 
<dd><a hre 伍 #" title=""> 电 脑 、 办 公 </a></dd> 
<dd><a hre 伟 "title=""> 家 居 、 家 具 、 家 装 、 厨 具 </a></dd> 
<dd><a hre 合 '"#' title=""> 服 饰 内 衣 、 珠 宝 首 饰 </a></dd> 
<dd><a hre 伍 "#" title=""> 个 护 化 妆 </a></dd> 
<dd><a hre 伍 "#" title=""> 鞋 靳 、 箱 包 、 钟 表 、 奢 侈 品 </a></dd> 
<dd><a hre 伍 #" title=""> 运 动 户外 </a></dd> 


</dl> 
</div> 
<!--[f lte IE 6]></td></tr></table></a><![endif|--> 
</h> 
</ul> 
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岩 提示 : 在 超 链 接 中 包含 一 个 面板 结构 ， 为 了 让 超 链 接 在 IE 浏览 器 中 能 够 正常 响应 ， 代 码 中 使 用 
IE 条 件 语 名 (后面 章节 会 详细 讲解 ) 。IE 条 件 语句 是 一 个 条 件 结 构 ， 用 来 判断 当前 正 浏 
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览 器 的 版 本 号 ， 以 便 执行 不 同 的 CSS 样式 或 解析 不 同 的 HTML 结构 。 


第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 


第 3 步 ， 编 写 下 拉 式 导航 面板 的 CSS 样式 如 下 : 
#lists {/* 定 义 总 包含 框 基本 结构 */ 


background: url(images/bg1.gif) #fff: 放 背 景 图 像 */ 
padding-left: 32px: 诺 左 侧 补 白 */ 
margin: Opx: 访 清 除 边 界 */ 
height:35px;: 诺 固 定 高 度 */ 
font-size: 12px: /# 字 体 大 小 并 

} 

#lists li {/* 定 义 列表 项 目 基本 样式 */ 
display:inline: 诺 行 内 显示 */ 
float:left: 床 向 左 浮动 */ 
height:35px; 旋回 定 高 度 */ 
background:url(images/menu5.gif) no-repeat left center;: ”/* 背 景 图像 */ 
padding-left: 12px: 诺 左 侧 补 白 */ 
position:relative; /# 相 对 定位 ， 为 下 拉 导 航 面板 绝对 定位 指定 一 个 参考 框 类 

} 

jists liatl {人 * 定 义 超 链接 基本 样式 */ 
display:block: 诺 块 状 显示 */ 
width:80px: /*# 固 定 宽 度 #/ 
height:3Spx: 诺 固 定 高 度 */ 
text-decoration:none: /清除 下 画 线 类 
text-align:center; 话 文 本 水 平 大 中 */ 
line-height:3Spx: /# 行 高 ， 实 现 垂直 居中 煌 
font-weight:bold: 此 加 粗 显 示 */ 
color:#fff: 上 访 字 体 颜色 为 白色 */ 
background:url(images/menu5.gif) no-repeat right center; 沪 定 义 导 航 背 景 图 像 */ 
padding-right: 12px: 诺 定 义 右 侧 补 白 大 小 */ 


} 


#lists div {display:none;}/* 定 义 超 链 接 包 含 的 导航 面板 的 隐藏 显示 */ 


#lists :hover div {/* 显 示 并 定义 超 链 接 包 含 的 导航 面板 */ 
display:block: 
width:598px:; 
background:#faebd7: 
position:absolute: 
left: 1px; 
top:34px; 
border: 1px solid #888; 
padding-bottom: 10px; 
} 


/# 块 状 显示 拆 

/*# 固 定 宽度 村 

/# 定 义 背 景色 机 

诬 绝 对 定位 ， 以 便 自由 显示 */ 

/*# 距 离 包 含 框 左 侧 (i 元素) 的 距离 */ 
访 距 离 包 含 框 顶部 的 距离 */ 

话 定 义 边 框 线 */ 

/# 定 义 底部 补 白 */ 


第 4 步 ， 保 存 页 面 之 后 ， 在 浏览 器 中 预览 ， 则 演示 效果 如 图 6.22 所 示 。 
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定义 内 部 样式 表 ， 准 备 编写 样式 。 


2 “es (sss 网 页 设计 从 入 门 到 精通 (长 课 精 编 版 ) 
| 
| 


产品 大 类 


= 


过 用 申 器 

| 手机 ， 儿 到 、 误 东 请 守 约 
| bE 

1 


图 6.22 ”下 拉 式 导航 面板 
| 64 人 在线 练习 


| 本 节 通 过 大 量 案例 练习 CSS3 列表 和 超 链 接 的 样式 设计 , 感 兴趣 的 读者 可 以 扫 码 强化 基本 功 训练 : 
” (1) 列表 样式 ，(2) 超 链接 样式 。 


| 0 
] 在 线 练习 在 线 练习 2 
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章 


使 用 CSS 美化 表格 


在 传统 网 页 设计 中 ， 表 格 的 主要 功能 就 是 页 面 布 局 ， 因 此 表格 也 成 为 网 页 编辑 的 工具 ; 
在 标准 化 网 页 设计 中 ,表格 的 主要 功能 是 显示 数据 ,也 可 适当 辅助 结构 设计 。 本 章 将 详细 介 
绍 表格 在 网 页 设计 中 的 应 用 ,包括 设计 符合 标准 的 表格 结构 、 正 确 设置 表格 属性 和 灵活 应 用 


CSS 表格 样式 。 


【 学 习 重 点 】 

W|I 正确 使 用 表格 标签 ， 

W|I 设置 表格 和 单元 格 属性 。 
Wl 设计 表格 的 CSS 样式 。 


Csss 网 页 设计 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


7.1] 表格 属性 


| 本 节 将 介绍 <table>、<td> 和 <th> 的 标签 属性 。 
Note 


/ 7.1.1 设置 表格 属性 


和 表格 标签 <table> 包 含 大 量 属 性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 ， 也 有 几 个 专用 属性 
证 膏 夺 无 法 使 用 CSS 实现 。HTML5 支持 的 <table> 标 签 属性 说 明 如 表 7.1 所 示 。 


表 7.1 HTML5 支持 的 <table> 标 签 属性 
属 性 说 明 
定义 表格 边框 ， 值 为 整数 ， 单 位 为 像素 。 当 值 为 0 时， 表示 隐藏 表格 边框 线 。 功 能 类 似 CSS 中 
的 border 属性 ， 但 是 没有 CSS 提供 的 边框 属性 强大 
cellpadding | 定义 数据 表单 元 格 的 补 白 。 功 能 类 似 CSS 中 的 padding 属性 ， 但 是 功能 比较 弱 
cellspacing | 定义 数据 表单 元 格 的 边界 。 功 能 类 似 CSS 中 的 margin 属性 ， 但 是 功能 比较 弱 
width 定义 数据 表 的 宽度 。 功 能 类 似 CSS 中 的 width 属性 
设置 数据 表 的 外 边框 线 显示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 ， 取 值 包括 void (不 显示 任 
一 边框 线 ) 、above (顶端 边框 线 ) 、below〔 底 部 边框 线 ) 、hsides (顶部 和 底部 边框 线 ) 、lhs 


border 


ffame | (去 边 框 线 ) 、ths (右边 框 线 ) 、vsides ( 左 和 右边 的 框 线 ) 、box (所 有 四 周 的 边框 线 ) 、border 
(所 有 四 周 的 边框 线 ) 
设置 数据 表 的 内 边线 显示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 ， 取 值 包括 none (禁止 显示 内 
rules 边线 ) 、groups ( 仅 显 示 分 组 内 边线 ) 、rows (显示 每 行 的 水 平 线 ) 、cols (显示 每 列 的 垂直 线 ) 、 


all (显示 所 有 行 和 列 的 内 边线 ) 
summary 定义 表格 的 摘要 ， 没 有 CSS 对 应 属性 


rules 和 frame 是 两 个 特殊 的 表格 样式 属性 ， 用 于 定义 表格 的 各 个 内 、 外 边框 线 是 否 显示 。 由 于 使 
用 CSS 的 border 属性 可 以 实现 相同 的 效果 ， 所 以 不 建议 用 户 选 用 。 
【示例 1】 下 面 示例 借助 表格 标签 的 fame 和 rules 属性 定义 表格 以 单行 线 的 形式 进行 显示 。 


<table border="]1" frame="hsides" rmles="rows" width="]100%"> 
<caption>frame 属性 取 值 说 明 </caption> 
<tr>< 了 th> 值 </t 了 hp><th> 说 明 </th></tr> 
<tr><td>void</td><td> 不 显示 外 侧 边框 。</td></tr> 
<tr><td>above</td><td> 显 示 上 部 的 外 侧 边框 。</td></tr> 
<tr><td>below</td><td> 显 示 下 部 的 外 侧 边 框 。</td> </tr> 
<tr><td>hsides</td><td> 显 示 上 部 和 下 部 的 外 侧 边框 。</td></tr> 
<tr><td>vsides</td><td> 显 示 左 边 和 右边 的 外 侧 边框 。</td></tr> 
<tr><td>lhs</td><td> 显 示 左 边 的 外 侧 边框 。</td></tr> 
<tr><td>rhs</td><td> 显 示 右 边 的 外 侧 边框 。</td></tr> 
<tr><td>box</td> <td> 在 所 有 四 个 边 上 显示 外 侧 边 框 。</td></tr> 
<tr><td>border</td><td> 在 所 有 四 个 边 上 显示 外 侧 边 框 。</td></tr> 

</table> 
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二 


上 面 示例 通过 frame 属性 定义 表格 仅 显示 上 下 框 线 , 使 用 rules 属性 定义 表格 仅 显示 水 平 内 边线 ， 
从 而 设计 出 单行 线 数据 表格 效果 。 在 使 用 frame 和 rules 属性 时 ， 同 时 定义 border 属性 ， 指 定数 据 表 ， 
显示 边框 线 。 在 浏览 器 中 预览 ， 则 显示 效果 如 图 7.1 所 示 。 
cellpadding 属性 用 于 定义 单元 格 边沿 与 其 内 容 之 间 的 空白 ,cellspacing 属性 定义 单元 格 之 间 的 空 会 六 | 
间 。 这 两 个 属性 的 取 值 单 位 为 像素 或 者 百分比 。 es 
【示例 2】 下 面 示 例 设计 井 字 形状 的 表格 。 


<table border="1" frame="vold" cellpadding="6" cellspacine="16"> | 
<caption>rules 属性 取 值 说 明 </caption> | 
<tr><th> 值 </th><th> 说 明 </th></tr> 
<tr><td>none</td><td> 没 有 线条 。</td></tr> | 
<tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></tr> 
<tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></tr> | 
<tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></tr> | 
<tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> | 

</table> | 


上 面 示例 通过 frame 属性 隐藏 表格 外 框 ,然后 使 用 cellpadding 属性 定义 单元 格 内 容 的 边 距 为 6px， 
单元 格 之 间 的 间距 为 16px， 则 在 浏览 器 中 预览 效果 如 图 7.2 所 示 。 


GG © Iocalhost/test1.html 


D localhosttestljhoml x rulcs 层 性 丙 值 说 明 


Ea | © localhost/test].html 


frame 属 性 取信 说 明 | 
说 明 没有 线条 。 ' 
不 显示 外 侧 边 框 。 | 


voit 得 和 WE 
aove 品 东 上 部 的 外 贡 训 柜 。 z 于 行 组 和 列 组 之 间 的 线条 。 
CE 下 站 部 的 外 全 久 入 Youb3 位 于 行 组 和 列 组 之 间 的 线条 


吕 示 上 部 和 下 部 的 外 何 边 框 。 = 
显示 左边 和 右 过 的 外 侧 边 框 。 rows ”| 位 于 行 之 间 的 线 东 。 

显示 左边 的 外 侧 边 框 。 
显示 右边 的 外 划 边 框 。 eols 人 世 于 列 之 间 的 线 车 。 
在 所 有 回 个 边 上 显示 外 何 矶 杠 。 
在 所 有 四 个 廊 上 哟 示 外 他 边框 。 和 位 于 行 和 列 之 间 的 线条 。 | 


| 
图 7.1 定义 单线 表格 样式 图 7.2 定义 井 字 表格 样式 


会 提示 : cellpadding 属性 定义 的 效果 可 以 使 用 CSS 的 padding 样式 属性 代替 ， 建 议 不 要 使 用 
cellpadding 属性 。 


7.1.2 设置 单元 格 属性 有 
单元 格 标签 (<td> 和 <th>) 包含 大 量 属性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 ， 也 有 几 个 ， 
| 


专用 属性 无 法 使 用 CSS 实现 。HTMLS5 支持 的 <td> 和 <th> 标 签 属性 说 明 如 表 7.2 所 示 。 


表 7.2 HTML5 支持 的 <td> 和 <th> 标 签 属性 

属 性 说 明 | 
abbr 定义 单元 格 中 内 容 的 缩写 版 本 | 
定义 单元 格 内 容 的 水 平 对 齐 方式 ， 取 值 包 括 right ( 右 对 齐 ) 、left ( 左 对 齐 ) 、center (居中 对 齐 ) 、 

align justify (两 端 对 齐 ) 和 char( 对 准 指定 字符 〉。 功 能 类 似 CSS 中 的 text-align 属性 ， 建 议 使 用 CSS | 
完成 设计 
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续 表 


属 性 说 了 明 
axis 对 单元 格 进行 分 类 ， 取 值 为 一 个 类 名 
char 定义 根据 哪个 字符 来 进行 内 容 的 对 齐 
charoff 定义 对 齐 字 从 的 偏 移 量 
colspan 定义 单元 格 可 横 跨 的 列 数 
headers 定义 与 单元 格 相 关 的 表 头 
rowspan | 定义 单元 格 可 横 跨 的 行 数 
定义 将 表 头 数据 与 单元 格 数据 相关 联 的 方法 , 取 值 包括 col( 列 的 表 头 )、colgroup ( 列 组 的 表 头 )、 
row ( 行 的 表 头 ) 、rowgroup 〈 行 组 的 表 头 ) 
定义 单元 格 内 容 的 垂直 排列 方式 。 取 值 包括 top( 顶 部 对 齐 )、middle( 拓 中 对 齐 ) 、bottom (底部 
对 齐 ) 、baseline (基线 对 齐 ) 。 功 能 类 似 CSS 中 的 vertical-align 属性 ， 建 议 使 用 CSS 完成 设计 


colspan 和 rowspan 是 两 个 重要 的 单元 格 属性 ， 分 别 用 来 定义 单元 格 可 路 列 或 跨行 显示 。 取 值 为 


vallon 


” 正 整 数 ， 如 果 取 值 为 0， 则 表示 浏览 器 横 跨 到 列 组 的 最 后 一 列 或 者 行 组 的 最 后 一 行 。 


【示例 】 下 面 示例 使 用 colspan=5 属性 ， 定 义 单元 格 跨 列 显示 ， 效 果 如 图 7.3 所 示 。 


<table border=]1> 
<tr><th align=center colspan=5> 课 程 表 </th></tr> 
<tr><th> 星 期 一 </th><th> 星 期 二 </th> < 也 > 星期 三 </ 也 >< 了 b> 星期 四 </ 了 ><th> 星 期 五 </th></tr> 
<tr><td align=center colspan=5> 上 午 </td> </tr> 
<tr><td> 语 文 </td><td> 物 理 </td> <td> 数 学 </td> <td> 语 文 </td><td> 美 术 </td></tr> 
<tr><td> 数 学 </td><td> 语 文 </td><td> 体 育 </td> <td> 英 语 </td><td> 音 乐 </td></tr> 
<tr><td> 语 文 </td> <td> 体 育 </td><td> 数 学 </td><td> 英 语 </td><td> 地 理 </td></tr> 
<tr><td> 地 理 </td><td> 化 学 </td><td> 语 文 </td> <td> 语 文 </td><td> 美 术 </td></tr> 
<tr><td align=center colspan=5> 下 午 </td></tr> 
<tr><td> 作 文 </td><td> 语 文 </td><td> 数 学 </td><td> 体 育 </td><td> 化 学 </td></tr> 
<tr> <td> 生 物 </td><td> 语 文 </td><td> 物 理 </td><td> 自 修 </td><td> 自 修 </td></tr> 
</table> 


图 7.3 定义 单元 格 跨 列 显示 


7.2 表格 基本 样式 


CSS 为 表格 定义 了 5 个 专用 属性 ， 详 细 说 明 如 表 7.3 所 示 。 
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表 7.3 CSS 表格 属性 列表 


属 ”性 说 有明 
Ne 定义 表格 的 行 和 单元 格 的 边 是 合并 在 一 起 还 是 按照 标准 的 HIML 样 
collapse ( 边 合并 ) 式 分 开 
ee 定义 当 表 格 边 框 独立 (如 border-collapse 属性 等 于 separate) 时 ， 行 
和 单元 格 的 边 在 横向 和 纵向 上 的 间距 ， 该 值 不 可 以 取 负 什 
| ET 定义 表格 的 caption 对 象 位 于 表格 的 顶部 或 底部 。 应 与 caption 元 素 
caption-side top | bottom Ss 
一 起 使 用 
i 定义 当 单元 格 无 内 容 时 ， 是 否 显 示 该 单元 格 的 边框 
定义 表格 的 布局 算法 ， 可 以 通过 该 属性 改善 表格 呈 递 性 能 ， 如 果 设 
ee 置 fixed 属性 值 ， 会 使 正 以 一 次 一 行 的 方式 呈 递 表格 内 容 ， 从 而 以 
更 快 的 速度 将 信息 提供 给 用 户 ， 如 果 设 置 auto 属性 值 ， 则 表格 在 每 
一 单元 格 内 所 有 内 容 读 取 计 算 之 后 才 会 显示 出 来 


除了 表 7.3 介绍 的 5 个 表格 专用 属性 外 ，CSS 其 他 属性 对 于 表格 一 样 适用 。 


7.2.1 设计 表格 边框 线 


使 用 CSS 的 border 属性 代替 <table> 标 签 的 border 属性 定义 表格 边框 ， 可 以 优化 代码 结构 。 
【示例 】 下 面 示例 演示 如 何 使 用 CSS 设计 细 线 边框 样式 的 表格 。 
【操作 步骤】 

第 1 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 

第 2 步 ， 在 内 部 样式 表 中 输入 下 面 样式 代码 ， 定 义 单元 格 边框 显示 为 1px 的 灰色 实 线 。 


th, td {font-size:12px; border:solid 1px gray:} 
第 3 步 ， 在 <body> 标 签 内 构建 一 个 简单 的 表格 结构 。 


<table> 
< 一 ff 全 
<th> 属 性 </th> 
<th> 版 本 </th> 
<th> 继 承 性 </th> 
<th> 描 述 </th> 
</tr> 
<tr> 
<td>table-layout</td> 
<td>CSS2</td> 
<td> 无 </td> 
<td> 设 置 或 检索 表格 的 布局 算法 </td> 
</tr> 
<tr> 
<td>border-collapse</td> 
<td>CSS2</td> 
<td> 有 </td> 
<td> 设 置 或 检索 表格 的 行 和 单元 格 的 边 是 合并 在 一 起 还 是 按照 标准 的 HTML 样式 分 开 </td> 
</tr> 
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| 
| < 
| <td>border-spacing</td> 
<td>CSS2</td> 
| <td> 有 </td> 
| <td> 设 置 或 检索 当 表格 边框 独立 时 ， 行 和 单元 格 的 边框 在 横向 和 纵向 上 的 间距 </td> 
| </tr> 
Note <t> 
<td>caption-side</td> 
<td>CSS2</td> 
<td> 有 </td> 
<td> 设 置 或 检索 表格 的 caption 对 象 是 在 表格 的 哪 一 边 </td> 
</tr> 
<tr> 
<td>empty-cells</td> 
<td>CSS2</td> 
<td> 有 </td> 
<td> 设 置 或 检索 当 表 格 的 单元 格 无 内 容 时 ， 是 否 显示 该 单元 格 的 边框 </td> 
</tr> 
</table> 


| ”属性 | 版 本 
Ey Cs 
border-collapse||CSS2 


border-spacing ||CSS2 
[pionsde [CS53 
(empty-cells JICSS2 


a . 


图 7.4 使 用 CSS 定义 单元 格 边框 样式 


通过 效果 图 可 以 看 到 ， 使 用 CSS 定义 的 单行 线 不 是 连贯 的 线条 。 这 是 因为 表格 中 每 个 单元 格 都 
是 一 个 独立 的 空间 ， 为 它们 定义 边框 线 时 ， 相 互 之 间 不 是 紧密 连接 在 一 起 的 。 

第 5 步 ， 在 内 部 样式 表 中 ， 为 table 元 素 添加 如 下 CSS 样式 ， 把 相 邻 单元 格 进行 合并 。 

table {border-collapse:collapse;}/* 合 并 单元 格 边 框 */ 


第 6 步 ， 在 浏览 器 中 重新 预 物 ， 则 页 面 效 果 如 图 7.5 所 示 。 


OE hoocalhoswest hm - BO 从 大 次 
es 
Ee 

有 下 的 行 和 单元 祁 果 过 时 合 所 二 是 拘 且 标准 的 HIME 样式 分 姑 


2 9 
rte me cs RE 元 Eb 在 机 ed 上 后 了 
por- -de 553 识 加 位 来 直 人 8eahuomd 多 人 来 巾 的 时 过 
empty-cells 。 ICSSJ 有 | 设 直 或 检索 旺 直 该 单 并 格 昌 2 


图 7.5 使 用 CSS 合并 单元 格 边框 
7.2.2 定义 单元 格 则 距 和 空 际 
为 了 兼容 <table> 标 签 的 cellspacing 属性 ，CSS 定义 了 border-spacing 属性 ， 该 属性 能 够 分 离 单元 格 
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间距 ， 取 值 包含 一 个 或 两 个 值 。 当 定义 一 个 值 时 ， 则 定义 单元 格 行 间 距 和 列 间距 都 为 该 值 。 例 如 : 
table {border-spacing:20px;}/* 分 隔 单元 格 边 框 */ | 
如 果 分 别 定义 行 间距 和 列 间距 ， 就 需要 定义 两 个 值 ， 例 如 : | 
table {border-spacing:10px 30px;}/* 分 隔 单 元 格 边 框 */ | 于、 


其 中 第 一 个 值 表 示 单 元 格 之 间 的 行 间距 , 第 二 个 值 表示 单元 格 之 间 的 列 间 距 , 该 属性 值 不 可 以 为 匡 2 作 [2 
负数 。 使 用 cellspacing 属性 定义 单元 格 之 间 的 距离 之 后 ， 该 空间 由 表格 背景 填充 。 | 
使 用 该 属性 应 注意 几 个 小 问题 : | 
早期 正 浏览 器 不 支持 该 属性 ， 要 定义 相同 效果 的 样式 ， 这 就 需要 结合 传统 <table> 标 签 的 ， 
cellspacing 属性 来 设置 。 
使 用 cellspacing 属性 时 ， 应 确保 单元 格 之 间 相 互 独立 性 ， 不 能 使 用 border-collapse:collapse: | 
样式 定义 合并 表格 内 单元 格 的 边框 。 
cellspacing 属性 不 能 够 使 用 CSS 的 margin 属性 来 代 蔡 。 对 于 td 元 素来 说 ， 不 文 持 margin | 


属性 。 | 
回 “ 可 以 为 单元 格 定义 补 白 ， 此 时 使 用 CSS 的 padding 属性 与 单元 格 的 cellpadding 标签 属性 实 ， 
现 效果 是 相同 的 。 


【示例 1】 以 7.2.1 节 示 例 中 表格 结构 为 基础 ， 重 新 设计 内 部 样式 表 ， 为 表格 内 单元 格 定义 上 下 
6px 和 左右 12px 的 间距 ， 同 时 设计 单元 格 内 部 空 际 为 12px， 演 示 效 果 如 图 7.6 所 示 。 
table {border-spacing: 6px 12px;} 
th, td { 
font-size: 12px:; 
border: solid 1px gray:; 
padding: 12px; 
} 


设置 或 榨 案 志 档 的 行 和 单元 档 的 边 是 合并 在 一 起 还 叶 拭 昭 标 淮 的 TTY 全 样式 分 开 


访 置 或 术 索 当 去 榴 边 框 独立 时 ， 行 和 单元 将 的 边框 在 棋 向 积 纳 向 上 的 间 下 


设置 或 检索 去 格 的 capticng 阁 是 在 去 格 的 哪 一 边 


设置 或 检索 当 去 格 的 单元 棺 无 内 容 时 ， 是 否 显 示 该 单元 格 的 边框 | 


图 7.6 增加 单元 格 空 阶 | 
也 可 以 为 <table> 标 签 定 义 补 白 ， 此 时 可 以 增加 表格 外 框 与 单元 格 之 间 的 距离 。 
【示例 2】 以 示例 1 为 基础 ， 为 <table> 标 签 重 设 如 下 样式 ， 设 计 表 格外 框 为 2px 红色 实 线 ， 定 义 
表格 外 框 与 内 部 单元 格 间距 为 2px， 则 显示 效果 如 图 7.7 所 示 。 


table { 
border-spacing: 6px 12px; 
border: solid 2px red: 


i 
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| 
padding: 2px; 


| +) -| 元 htip://localhost/test2.htm -Bcl@locahost x 
1 

~ ] BEd OO 
Note table-layout [em | EN 设置 或 检索 去 枪 的 布 后 算法 

ee ess | | 设 村 或 村 索 去 格 的 行 和 单元 林 的 这 是 合并 在 一 起 还 是 技 照 标准 约 HTML 样式 分 开 
berder spacing Eg I | 设置 或 恰 索 当 夫 净 边 蛋 各 立时 ， 行 和 单元 榨 的 边框 在 模 向 和 纵向 上 的 间距 
caption side 区 本 | 设置 或 检索 志 检 的 -aptiongj 象 是 在 去 格 的 刚 一 边 
| 
i | sa | [| 设置 或 检索 当 去 格 的 单元 恪 无 内 容 时 ， 是 否 吕 示 访 音 元 属 的 边民 


7.7 ”为 表格 和 单元 格 同时 定义 补 白 效果 


7.2.3 ”隐藏 空 单元 格 


| 如 果 表 格 单元 格 的 边框 处 于 分 离 状态 (border-collapse:separate; )， 可 以 使 用 CSS 的 empty-cells 
”属性 设置 空 单元 格 是 否 显示 。 当 其 值 为 show 时 ， 表 示 显 示 空 单元 格 ， 当 其 值 为 hide 时 ， 表 示 隐 藏 空 


， 单 元 格 。 

| 【 示例】 在 下 面 示 例 中 ， 隐 藏 第 2 行 第 2 列 的 空 单元 格 边 框 ， 效 果 如 图 7.8 所 示 。 
<style type="text/css"> 

table {/* 表 格 样式 */ 

| width: 400px: /# 固 定 表 格 宽度 类 

border: dashed 1px red: 谍 定 义 虚线 表格 边框 */ 

| empty-cells: hide: /* 隐 藏 空 单元 格 #/ 

| 

| th, td {/* 单 元 格 样式 */ 

| border: solid 1px #000; /# 定 义 实 线 单 元 格 边框 煌 
padding: 4px: 上 定义 单元 格 内 的 补 白 区 域 */ 
| 国 罗 

</style> 

| <table> 

] <tr><td> 西 </td><td> 东 </td> </tr> 

I <tr><td> 北 </td><td></td></tr> 

| </table> 


‘| hepocalhowm P - Bo 二 3 SE Bo 人 


隐藏 空白 单元 格 默认 显示 的 空白 单元 格 
| 7.8 ”隐藏 空 单 元 格 效果 
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行 就 等 于 设置 了 display: none。 


7.2.4 定义 标题 样式 


使 用 CSS 的 caption-side 属性 可 以 定义 标题 的 显示 位 置 ， 该 属性 取 值 包括 top 位 于 表格 上 面 )、 
bottom 位 于 表格 底部 )、left( 位 于 表格 左 侧 ， 非 标准 ) 和 right〈 位 于 表格 右 侧 ， 非 标准 )。 | 
如 果 要 水 平 对 齐 标题 文本 ， 则 可 以 使 用 text-align 属性 。 对 于 左右 两 侧 的 标题 ， 可 以 使 用 | 
vertical-align 属性 进行 垂直 对 齐 ， 取 值 包括 top、middle 和 bottom， 其 他 取 值 无 效 ， 默 认为 top。 ] 
【示例 】 在 下 面 示例 中 ， 定 义 标题 靠 左 显 示 ， 并 设置 标题 重 直 居中 显示 。 但 不 同 浏 览 器 在 解析 时 
分 歧 比 较 大 ， 如 在 下 浏览 器 中 显示 效果 如 图 7.9 所 示 ， 但 是 在 Firefox 中 显示 效果 如 图 7.10 所 示 。 


<style type="text/css"> 

table {border: dashed lpx red: } 

th, td {/* 定 义 单元 格 样 式 */ 
border: solid 1px #000; 
padding: 20px 80px; 


} 

caption {/* 定 义 标 题 行 样式 */ 
caption-side: left: 
width: 10px: 
margin: auto 20px; 
vertical-align: middle: 
font-size: 14px:; 
font-weight: bold: 


color: #666: 
} 
</style> 
<table> 
<caption> 表 格 标 题 </caption> 
<tr><td> 北 </td><td> 西 </td> </tr> 
<tr><td> 东 </td><td> 南 </td> </tr> 
</table> 


(ENE hatp:ylccahoxtm DOD - Ro | 6#H x 
二 


图 7.9 正解 析 表 格 标题 效果 
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所 谓 空 单元 格 ， 就 是 没有 可 视 内 容 的 单元 格 。 如 果 单 元 格 的 visibility 属性 值 为 hidden， 即 / 
便 单 元 格 包 含 内 容 ， 也 认为 是 无 可 视 内 容 。 而 “&enbsp;” 和 其 他 空白 字符 为 可 视 内 容 。 ASCIT 
字符 中 的 回 车 符 (\0D ) 、 换 行 符 (\0A ) 、Tab 键 (\09 ) 和 空格 键 (\20 ) 表示 无 可 视 内 容 。 
如 果 表 格 行 中 所 有 单元 格 的 empty-cells 属性 都 为 hide， 且 都 不 包含 任何 可 视 内 容 , 那么 整 


瞩 定 义 表格 虚线 外 框 样式 */ 


记 实 线 内 框 */ 
人 * 单 元 格 内 补 白 大 小 */ 


谍 左 侧 显 示 */ 
jv 
诺 定 义 左右 边界 */ 
谍 垂 直 届 中 显示 */ 
访 定 义 字 体 大 小 */ 
谍 加 粗 显 示 */ 
诺 灰 色 字 体 */ 


@ localhost/mysite/te ©@ 国 (2 EIM 百 提 <Ctr+Kk 内 人 三 


图 7.10 ”Firefox 解析 表格 标题 效果 


| &2 (sss 网 页 设计 从 入 门 到 精通 (向 课 精 编 县) 
| 

| 【拓展 】 

。 当 同时 为 <table>、<tr> 和 <td> 等 标签 定义 背景 色 、 边 框 、 字 体 属性 等 样式 时 ， 就 容易 发 生 样式 重 

， 奢 问 题 。 根 据 表格 布局 模型 ， 各 种 表格 对 象 背景 样式 层 登 的 顺序 如 图 7.11 所 示 。 


,= 一 htpeyylncalhasty myriteytesthtml 


表格 对 象 的 样式 层 全 顺序 


| 图 7.11 表格 对 象 样式 的 层 登 顺序 


从 图 7.11 可 以 看 到 : td 元 素 的 样式 具有 最 大 优先 权 ， 以 此 类 推 ， 如 果 单 元 格 为 透明 ， 则 行 《tr 
元 素 ) 具有 最 大 优先 权 。 表 格 定义 的 背景 优先 权 最 小 ， 当 表格 中 其 他 元 素 部 为 透明 时 ， 才 可 以 看 到 表 
格 的 背景 。 


73 案例 实战 


| 本 节 将 结合 几 个 案例 详细 讲解 表格 样式 的 一 般 设计 技巧 。 
7.3.1 设计 斑马 线 表 格 


本 例 将 对 一 个 简单 的 表格 进行 设计 ， 使 它 看 起 来 更 为 精致 。 另 外 ， 当 表格 的 行 和 列 都 很 多 ， 并 且 
数据 量 很 大 时 ， 单 元 格 采用 相同 的 背景 色 会 使 浏览 者 感到 凌乱 ， 发 生 看 错 行 的 情况 ， 此 时 可 为 表格 设 
， 置 隔行 变色 的 效果 ， 使 得 奇数 行 和 偶数 行 的 背景 色 不 一 样 ， 示 例 效果 如 图 7.12 所 示 。 


图 7.12 ”设计 隔行 变色 的 样式 效果 
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【操作 步骤 】 
第 1 步 ， 新 建 HIMLS 文档 ， 设 计 表 格 结构 。 


<table summary=" 有 历届 奥运 会 中 国 奖 牌 数 "> 
<caption> 历 届 奥 运 会 中 国 奖 牌 数 </caption> 


<tr><th> 编 号 </ 也 ><th> 年 份 </ 也 ><th> 城 市 </ 也 ><th> 金 牌 </th><th> 银 牌 </ 了 h>< 了 b> 铜牌 </t 了 ><th> 总 计 


</th></tr> 
</thead> 


<tbody> 


<tr><td> 第 23 届 </td><td>1984 年 </td><td> 洛 杉 矶 (美国 ) </td><td>15</td><td>8</td><td>9</td> 


<td>32</td></tr> 
<tr><td> 第 24 届 </td><td>1988 年 </td><td> 汉 城 〈 韩 国 ) </td><td> 5</td><td>11</td><td>12</td> 
<td>28</td></tr> 


<tr><td> 第 25 届 </td><td>1992 年 </td><td> 巴 塞 罗 那 (西班牙 ) </td><td>16</td><td>22</td><td>16 


</td><td>54</td></tr> 


<tr><td> 第 26 届 </td><td>1996 年 </td><td> 亚 特 兰 大 (美国 ) </td><td>16</td><td>22</td><td>12 


</td><td>50</td></tr> 


<tr><td> 第 27 届 </td><td>2000 年 </td><td> 和 悉尼 (澳大利亚 ) </td><td>28</td><td>16</td><td>15 


</td><td>59</td></tr> 


<tr><td> 第 28 届 </td><td>2004 年 </td><td> 雅 典 (希腊 ) </td><td>32</td><td>17</td><td>14</td> 


<td>63</td></tr> 
<tr><td> 第 29 届 </td><td>2008 年 </td><td> 北 京 (中 国 ) </td><td>51</td><td>21</td><td>28</td> 
<td>100</td></tr> 


<tr><td> 第 30 届 </td><td>2012 年 </td><td> 伦 敦 (英国 ) </td><td>38</td><td>27</td><td>23</td> ， 


<td>88</td></tr> 


<tr><td> 第 31 届 </td><td>2016 年 </td><td> 里 约 热 内 卢 (巴西 ) </td><td>26</td><td>18</td><td>26 


</td><td>70</td></tr> 
</tbody> 
<tfoot> 
<tr><th> 合 计 </th><td colspan="4">544 枚 </td></tr> 
</tfoot> 
</table> 


在 这 个 表格 中 ， 使 用 的 标记 从 上 至 下 依次 为 <caption>、<thead>、<tbody> 和 <tfoot>， 分 别 定义 表 ， 


格 的 标题 、 列 标题 行 、 数 据 区 域 和 脚注 行 。 


第 2 步 ， 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type="text/css"> 标 签 ， 在 该 标签 中 输入 下 面 样 


式 代 码 ， 定 义 表 格 样式 和 表格 标题 样式 。 


table {/* 表 格 样式 */ 
background-color: #FFF: color: #565;  /# 表 格 背景 色 和 字体 颜色 类 
border: none: 上 清除 表格 外 框 线 */ 
font: 12px arial: 谍 设 置 字体 大 小 和 类 型 */ 
width: 90%; 话 定 义 弹性 宽度 */ 
margin: 12px auto: 谍 表 格 水 平 居中 显示 */ 

} 

table caption {/* 表 格 标 题 样式 */ 
font-size: 24px: 访 定 义 表 格 标题 字体 大 小 */ 
border-bottom: 2px solid #B3DE94: /# 添 加 下 边线 部/ 
border-top: 2px solid #B3DE94: /# 添 加 上 边线 所 

} 


第 3 步 ， 设 计数 据 行 单元 格 样式 。 


.和 


Csss 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


tbody td, tbody th { 


background-color: #DFC: /# 定 义 背 景色 所 
border-bottom: 2px solid #B3DE94: /# 添 加 下 边线 类 
border-top: 3px solid #FFFFFF: /# 添 加 上 边线 #/ 
padding: 9px: /# 增 大 单元 格 空间 状 

} 

第 4 步 ， 设 计 脚 注 行 单元 格 样式 。 

tfoot td, tfoot th { 
font-weight: bold: /# 加 粗 显 示 头 
padding: 4px 8px 6px 9px: 放 增 大 单元 格 空间 */ 
text-align: center:; /# 居 中 显示 部/ 

第 5 步 ， 设 计 列 标题 行 样式 。 

es 


font-size: 14px: line-height: 19px: 
padding: 0 8px 2px; 


第 6 步 ， 为 最 后 4 列 单元 格 定义 样式 。 


tbody td+td+td+td{ 
color:Ted: 
text-align:rnight: 
} 
这 里 使 用 3 个 相 邻 选择 器 组 合 使 用 , 精确 匹配 到 后 面 4 列 单 元 格 标签 , 然后 设置 字体 颜色 为 红色 ， 


文本 右 对 齐 显 示 。 


【拓展 】 
用 户 可 以 使 用 <col> 或 <colgroup> 标 签 为 各 列 定义 样式 。 例 如 ， 下 面 代码 中 第 2 个 <col span="4"> 


”标签 可 以 为 最 后 4 列 定义 样式 。 


<table summary=" 历 届 奥 运 会 中 国 奖 牌 数 "> 
<caption> 
历届 奥运 会 中 国 奖牌 数 
</caption> 
<col span="3"></col> 
<col span="4" style="color:red; text-align:right"></col> 
<thead> 


</table> 
但 是 ， 现 代 标 准 浏览 器 仅 支 持 background-color 和 width 属性 ， 不 支持 其 他 CSS 属性 。IE 诡异 模 


” 式 支 持 所 有 CSS 属性 。 


第 7 步 ， 设 计 隔行 换 色 样式 。 
隅 行 换 色 是 一 款 比较 经 典 的 表格 样式 , 这 种 样式 主要 是 从 用 户 体 验 角 度 来 设计 的 ,以 提升 用 户 浏 


| 览 数据 的 速度 和 准确 度 。 隔 行 换 色 的 传统 设计 方法 : 定义 一 个 类 ， 然 后 把 该 类 应 用 到 所 有 奇数 行 或 偶 
， 数 行 。 推 荐 方法 : 使 用 CSS3 选择 器 匹配 表格 中 偶数 行 和 奇数 行 ， 并 设计 不 同 的 样式 。 


tbody tr:nth-child(odd) td { 
background-color: #CEA: 


。178 。 


border-bottom: 2px solid #67BD2A: 


第 8 步 ， 设 计 鼠 标 指针 移 过 数据 行 时 的 交互 样式 。 
tbody tr:hover td, tbody tr:hover th { 

background-color: #8b7; 

color: #fff: 
} 


7.3.2 设计 粗 线 框 表格 


本 例 以 7.3.1 节 案 例 的 数据 表格 结构 为 基础 ,介绍 如 何 使 用 CSS 把 表格 设计 为 网 格 化 效果 ， 以 此 
理解 CSS 控制 表格 的 方法 ， 案 例 效果 如 图 7.13 所 示 。 


【操作 步骤 】 
第 1 步 ， 新 建 HTMLS5 文档 ， 复 制 7.3.1 节 案 例 的 数据 表格 结构 ， 把 第 一 列 单元 格 <td> 标 签 改 为 
<th> 标 签 。 

第 2 步 ， 规 划 整 个 页 面 的 基本 显示 属性 ， 设 置 表格 样式 。 

body { /网 页 基本 样式 类 */ 
background-color: #f8e6e6;: 诺 网 页 背景 颜色 */ 
margin: SO0px: 谍 表 格 四 周 补 白 */ 

} 

table {* 表 格 样式 */ 
border: 6px double #3186dd: 族 表 格 边 框 */ 
font-family: Arial: 
text-align: center: 旋 表 格 中 文字 水 平 居中 对 齐 */ 
border-collapse: collapse: 旋 边 框 重 合 */ 


} 
此 时 显示 效果 如 图 7.14 所 示 。 可 以 看 到 ， 网 页 背景 闫 色 发 生 了 改变 ， 且 表格 显示 了 边框 。 


名 人 3 htto://localhost:8080/rysite/t=st html ” @0| loclhost 


历届 奥运 会 中 国 奖牌 数 i 
= EW 3 htip://localhost:3080, ~ 屿 
EE Se 
[Be om Rm Rm | | 8 | 9 | S| 
| 
| 本 | as E(B | 1 | 到 | 16 


[lao | 1090 | SR (| 16 | 22 | 12 
[a aaaos| RAR | 2 | 16 | 16 
[260 有 | 22 7 9 
[9 局 |2008 后 ， 北京 (| 51 | 21 


| 第 30 届 |2012 年 | 伦敦 (英国 | 38 | 27 | 23 | 88 如 汪 对 2 
人 吉 坟 2016F Ca) 
a 4 | i 
图 7.13 设计 粗 线 框 表格 图 7.14 设置 网 页 基本 属性 及 表格 样式 
第 3 步 ， 设 置 表格 标题 的 样式 。 
table caption { 话 设 置 表格 标题 */ 
padding-top: 3px:; 谍 设 置 表格 标题 的 顶部 边 距 */ 


三 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
~ 


ss 


(sss 网 页 习 守 从 入 门 到 生 通 ( 竹 刍 精 纺 用 ) 


padding-bottom: 4px: 诺 设 置 表格 标题 的 底部 边 距 */ 
font-size: 30px: /# 表 格 标题 字体 大 小 并 
color: red; 人/# 表 格 标题 字体 颜色 类 


第 4 步 ， 设 置 表格 中 的 单元 格 样式 。 
table th {/* 表 格 的 行 、 列 名 称 单元 格 的 样式 */ 


border: 2px solid #429fff: 诺 行 、 列 名 称 边框 */ 

background-color: #d2e8ff: 访 行 、 列 名 称 单元 格 的 背景 颜色 */ 

font-weight: bold: 谍 行 、 列 名 称 字 体 加 粗 */ 

padding-top: 4px: 谍 设 置 行 、 列 名 称 单元 格 的 上 、 下 、 左 、 右 边 距 */ 


padding-bottom: 4px:; 
padding-left: 10px:; 
padding-right: 10px: 
} 
table td {/* 表 格 单元 格 样式 */ 
border: 2px solid #429fff: /# 单 元 格 边框 尖 / 
} 
以 上 代码 中 ， 分 别 设置 了 <th> 和 <td> 标 签 的 样式 ， 对 表格 的 单元 格 进 行 了 背景 颜色 、 边 框 样式 的 
设置 ， 从 而 达到 美化 表格 的 目的 。 至此， 整个 案例 设计 完成 。 


吕 ”7.3.3 ”设计 浅 色 风格 表格 


本 例 通过 浅 色 搭配 设计 一 蒜 淡 雅 的 表格 效果 ,同时 设置 表格 隅 行 变色 ,使 奇数 行 和 偶数 行 背景 颜 


， 色 不 同 ， 让 数据 行 看 起 来 清晰 、 明 了， 案例 效果 如 图 7.15 所 示 。 


县 =- - 古 http://localhost308 )jmysite/test,html 


历届 奥运 会 中 国 奖牌 数 


城市 金牌 根 牌 
洛杉矶 《 关 国 ) 15 8 
浸 域 【韩国 》 5 11 
巴塞 罗 那 《西班牙 》 22 
亚 特 兰 太 《 美 国 ) 

悉尼 【澳大利亚 》 

雅典 【希腊 》 

北京 “中国 ) 

伦敦 【英国 ) 

里 约 热 内 卢 “ 巴西， 


图 7.15 设计 浅 色 风格 表格 


【操作 步骤 】 
第 1 步 ， 新 建 HIMLS 文档 ， 复 制 7.3.1 节 案 例 的 数据 表格 结构 。 
第 2 步 ， 定 义 网 页 基本 属性 、 表 格 <table id="mytable"> 的 样式 ， 以 及 表格 标题 样式 。 


body { /* 网 页 基本 样式 */ 
background: #E6EAES: 


} 
table { /* 表 格 样 式 */ 
width: 700px: 上 谍 表 格 宽度 */ 
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padding: 0; | 
margin: 0; | 
border: 1px solid #C1IDAD7: 话 表 格 边框 */ 
border-collapse: collapse; ] 


caption { + 设置 表格 标题 */ | 涯 确 
padding: 0 0 Spx 0; 
text-align: center; 访 水 平 居中 */ 
font-size: 30px; 访 字 体 大 小 */ | 
font-weight: bold: 率 字 体 加 粗 */ 

} | 


在 以 上 代码 中 ,首先 定义 了 页 面 的 背景 颜色 ， 然 后 设置 子 表格 的 宽度 为 700px， 并 为 其 添加 了 表格 边 
框 。 为 table 添加 border-collapse:collapse: 声 明 , 解决 单元 格 边框 分 离 问题 。 此 时 的 显示 效果 如 图 7.16 所 示 。 


[OO ET 
历届 奥运 会 中 国 奖 有 牌 数 


城市 - 
当 棚 了 (美国 ) I 
巴塞 罗 那 《 西 姓 牙 ) 
# 兰 大 (美国) 


图 7.16 设置 表格 基本 属性 | 


第 3 步 , 使 用 thead th 选择 器 单独 为 列 标题 行 定义 样式 , 使 用 tbody 选择 器 定义 数据 区 域 背 景色 。 
theadth { 
color: #4f6b72: 
border: 1px solid #C1DAD"”:; | 
letter-spacing: 2px:; | 
text-align: left: 
padding: 6px 6px 6px 12px.; 
background: #CAES8EA:; 
} | 
tbody { background: #fff:} 
第 4 步 ， 使 用 tbody th, tbody td 组合 选择 器 为 数据 区 单元 格 定义 样式 ， 这 样 就 避免 了 为 每 个 单元 
格 引 用 类 样式 。 
tbody th, tbody td { 
border: 1px solid 其 1DAD7; 
font-size: 14px: 


padding: 6px 6px 6px 12px:; 
color: #4f6b72: 


} 


第 5 步 ， 使 用 CSS3 的 结构 伪 类 选择 器 tbody tr:nth-child(2n) 专 门 为 数据 区 域内 所 有 偶数 行 定义 特 
殊 样 式 ， 实 现 隔行 换 色 效果 ， 这 样 避免 了 单独 为 偶数 行 单 元 格 应 用 特殊 类 样式 。 
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tbody tr:nth-child(2n) { 
background: #F SFAFA: 
color: #797268;: 


} 


7.3.4 设计 清新 风格 表格 


本 例 设 计 一 球 表格 样式 ， 其 整体 色调 以 清淡 为 主 ， 边 框 线 以 淡 蓝 色 为 主 色 调 ， 并 配 以 12px 的 灰 
色 字 体 ， 营 造 一 种 轻松 的 视 沉 效果。 然后， 使 用 隔行 换 色 样式 分 行 显示 数据 ， 这 也 是 目前 数据 表格 的 
”主流 样式 ， 它 符合 视线 的 换行 显示 ， 避 免 错 行 阅读 数据 。 使 用 渐变 背景 图 像 来 设计 表格 列 标题 ， 使 表 


强 。 格 看 起 来 更 大 方 ， 富 有 立体 感 。 


【操作 步骤】 

第 1 步 ， 新 建 HIMLS 文档 ， 复 制 7.3.1 节 案 例 的 数据 表格 结构 。 

第 2 步 ， 定 义 表格 样式 。 表 格 样式 包括 3 部 分 内 容 : 表格 边框 和 背景 样式 、 表 格 内 容 显示 样式 和 
， 表格 布局 样式 。 布 局 样式 包括 : 定义 表格 固定 宽度 解析 ， 这 样 能 够 优化 解析 速度 显示 空 单元 格 ; 合 
， 并 单元 格 的 边框 线 ， 并 设置 表格 居中 显示 。 表 格 边 框 为 1px 宽 的 浅 赣 色 实 线 框 ， 字 体 大 小 为 12px， 
| 颜色 为 灰色 。 


table {/* 表 格 基本 样式 */ 
table-layout:fixed: 谍 固 定 表格 布局 ， 优 化 解析 速度 */ 
empty-cells:show: 诺 显 示 空 单元 格 */ 
margin:0 auto: 诺 大 中 显示 */ 
border-collapse: collapse: 计 合 并 单元 格 边 框 */ 
border: 1px solid #cad9ea: 诺 边 框 样式 */ 
color:#666: 诺 灰 色 字 体 */ 
font-size:12px:; /# 字 体 大 小 部/ 
} 


会 提示 : table-layout 是 CSS 定义 的 一 个 标准 属性 ， 用 来 设置 表格 布局 的 算法 ， 取 值 包 括 auto 和 

| fixed。 当 取 值 为 auto 时 ， 则 布局 将 基于 单元 格 内 包含 的 内 容 来 进行 ， 表 格 在 每 一 单元 格 
内 所 有 内 容 读 取 计 算 之 后 才 会 显示 出 来 。 当 取 值 为 fixed 时 ， 表 示 固 定 布局 算法 ， 在 这 种 
算法 中 ， 表 格 和 列 的 宽度 取决 于 col 对 象 的 宽度 总 和 ， 如 果 没 有 指定 ， 则 根据 第 一 行 每 个 
单元 格 的 宽度 。 如 果 表 格 没 有 指定 宽度 ， 则 表格 被 呈 递 的 默认 宽度 为 100%。 设置 auto 布 
局 算法 ， 需 要 进行 两 次 布局 计算 ， 影 响 客户 端的 解析 速度 ， 而 fixed 布局 算法 仅 需 要 一 次 
计算 ， 所 以 速度 非常 快 。 

第 3 步 ， 定 义 列 标题 样式 。 列 标题 样式 主要 涉及 背景 图 像 的 设计 ， 具 体 代码 如 下 ; 


th {* 列 标题 样式 */ 
background-image: url(images/th bgl.gif): /# 指 定 渐变 背景 图 像 专 
background-repeat:repeat-x; 站 宇多 水 平和 于 证 代 
height:30px:; 诺 固 定 高 度 */ 

} 


列 标题 样式 的 设计 难点 是 背景 图 像 的 制作 ,具体 制作 方法 这 里 就 不 再 详细 讲解 ,读者 可 以 参考 本 
”案例 效果 在 Photoshop 中 进行 设计 。 
第 4 步 ， 定 义 单元 格 的 显示 样式 。 这 里 主要 定义 单元 格 的 高 度 、 边 框 线 和 补 白 。 定 义 单元 格 左右 


两 侧 的 补 白 目 的 是 避免 单元 格 与 数据 拥挤 在 一 起 。 
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td {height:20px;: /* 固 定 高 度 */} 此 单元 格 的 高 度 */ 
border: 1px solid #cad9ea: 话音 元 格 边框 线 ， 应 与 表格 边框 线 一 致 */ 
padding:0 lem 0: 上 * 单 元 格 左右 两 侧 的 补 白 ， 一 个 字 距 */ 

} 


td, 也 {/* 单 元 格 的 边框 线 和 补 自 * / 
| 


第 5 步 ， 定 义 隔 行 变 色 样 式 ， 定 义 比 边框 色 稍 浅 的 背景 色 。 
tbody tr:nth-child(2n) {background-color: #f5fafe:} 
第 6 步 ， 保 存 页 面 ， 在 浏览 器 中 预先 ， 显 示 效 果 如 图 7.17 所 示 。 


历届 奥运 会 中 国 奖牌 数 
城市 全 牌 捐 牌 

党 杉 宙 “美国 ) 15 

沈 址 1 捍 国 ) 

巴 瑟 办 和 那 【内 班 牙 ) 


亚 桂 三 大 〈 关 国 ) 
悉 尼 ! 右 和 HE? 
雅 下 i 之 脐 ) 


北京 【中国 ) 


伦 孝 ! 吕 因 》 
里 结 潢 内 卢 《巴西 ) 


图 7.17 设计 表格 效果 
7.3.5 设计 圆润 边框 表格 
本 例 使 用 CSS3 新 技术 设计 圆润 风格 的 表格 效果 : 使 用 border-radius 定义 圆 角 ; 使 用 box-shadow 
为 表格 添加 内 阴影 ， 设 计 高 亮 边 效果 ; 使 用 transition 定义 过 渡 动 画 ， 让 鼠标 指针 移 过 数据 行 ， 渐 显 


浅 色 背景 ; 使 用 linear-gradientO 函 数 定 义 标题 列 渐变 背景 效果 ， 以 替换 传统 使 用 背景 图 像 模 拟 渐变 效 
果 ; 使 用 text-shadow 属性 定义 文本 阴影 ， 让 标题 文本 看 起 来 更 富 立 体感 。 演 示 效 果 如 图 7.18 所 示 。 


| http://localhost:s080/mysite/test.html 


历届 奥运 会 中 国 奖牌 数 
城市 

洛杉矶 (美国 ) 

澡 城 (韩国 ) 

巴塞罗那 【 西 斑 下 ) 

亚特兰大 (美国 ) 


悉尼 【 针 大 利 亚 ) 
雅 扫 【希腊 ) 

北京 【中 国 ) 

伦敦 【某国 ) 
里 的 执 内 卢 (巴西 ) 


图 7.18 设计 表格 样式 


【操作 步骤 】 
第 1 步 ， 新 建 HIMLS 文档 ， 复 制 7.3.1 节 案 例 的 数据 表格 结构 。 


一 
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第 2 步 ， 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type="text/css"> 标 签 ， 在 该 标签 中 输入 下 面 样 


“ 式 代码 ， 定 义 表格 默认 样式 ， 并 定义 表格 外 框 主题 类 样式 。 


table { 
*border-collapse: collapse; /# 兼 容 IE7 及 其 以 下 版 本 浏览 器 */ 
border-spacing: 0: 
width: 100%:} 
.bordered { 
border: solid #ccc 1px; 
border-radius: 6pX: 
box-shadow: 0 lpx 1px #ccc:} 


第 3 步 ， 输 入 下 面 样式 代码 ， 统 一 单元 格 样式 ， 定 义 边 框 、 空 际 效果 。 


.bordered td, .bordered th { 
border-left: 1px solid 大 cc; 
border-top: 1px solid #ccece:; 
padding: 10px; 
text-align: left:} 


第 4 步 ， 输入 下 面 样式 代码 ， 设 计 表 格 标 题 列 样式 ， 通 过 渐变 效果 设计 标题 列 背 景 效果 ， 并 适当 


添加 阴影 ， 和 营造 立体 效果 。 


-bordered th { 
background-color: #dce9f9:; 
background-1mage: linear-gradient(top, #ebf3fc, #dce9f9); 
box-shadow: 0 lpx 0 rgba(255,255,255,.8) Inset: 
border-top: none: 
text-shadow: 0 lpx 0 reba(255,255,255,.5):} 


第 5 步 ， 输 入 下 面 样式 代码 ， 设 计 圆 角 效 果 。 在 制作 表格 圆 角 效果 之 前 ， 有 必要 先 完 成 这 一 步 。 


， 表格 的 border-collapse 默认 值 是 separate， 将 其 值 设置 为 0， 也 就 是 “border-spacing:0;”。 为 了 能 兼容 
,IE7 以 及 更 低 版 本 的 浏览 器 ， 需 要 加 上 一 个 特殊 的 属性 border-collapse， 并 且 将 其 值 设 置 为 collapse。 


i 
*border-collapse: collapse; /* 兼 容 IE7 及 其 以 下 版 本 浏览 器 */ 
border-spacing: 0: 

} 


第 6 步 ， 设 计 圆 角 效 果 ， 有 具体 代码 如 下 : 


让 一 整个 表格 设置 了 边框 ， 并 设置 了 圆 角 一 */ 

.bordered {border: solid #ccc 1px: border-radius: 6px:} 

/# 一 表格 头 部 第 一 个 也 需要 设置 一 个 左上 角 圆 角 一 #/ 
.bordered th:first-child {border-radius: 6px 0 0 0:} 

让 一 表格 头 部 最 后 一 个 也 需要 设置 一 个 右上 角 圆 角 二 */ 
.bordered th:last-child {border-radius: 0 6px 0 0:} 

让 一 表格 最 后 一 行 的 第 一 个 td 需要 设置 一 个 左下 角 圆 角 一 */ 
.bordered tr:last-child td:first-child {border-radius: 0 0 0 6px;} 

/#- 一 表格 最 后 一 行 的 最 后 一 个 td 需要 设置 一 个 右 下 角 圆 角 一 */ 
.bordered tr:last-child td:last-child {border-radius: 0 0 6px 0:} 


第 7 步 ， 由 于 在 table 中 设置 了 一 个 边框 ， 为 了 显示 圆 角 效果 ， 需 要 在 表格 的 4 个 角 的 单元 格 上 


分 别 设置 圆 角 效果 ， 并 且 其 圆 角 效果 需要 和 表格 的 圆 角 值 大 小 一 样 。 反 之 ， 如 果 在 table 上 没有 设置 
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边框 ， 只 需要 在 表格 的 4 个 角落 的 单元 格 设置 事 角 ， 束 能 实现 圆 角 效果 。 


/#- 一 表格 头 部 第 一 个 也 需要 设置 一 个 左上 角 圆 角 一 #/ 
.bordered th:first-child {border-radius: 6px 0 0 0:} 

/# 一 表格 头 部 最 后 一 个 也 需要 设置 一 个 右上 角 圆 角 一 关 
.bordered th:last-child {border-radius: 0 6px 0 0:} 

让 一 表格 最 后 一 行 的 第 一 个 td 需要 设置 一 个 左下 角 圆 角 一 #/ 
.bordered tfoot td:first-child {border-radius: 0 0 0 6px:} 

让 一 表格 最 后 一 行 的 最 后 一 个 td 需要 设置 一 个 右 下 角 圆 角 一 #/ 
.bordered tfoot td:last-child {border-radius: 0 0 6px 0;} 


在 上 面 的 代码 中 ， 使 用 了 许多 CSS3 的 伪 类 选择 器 。 


第 8 步 ， 除 了 使 用 CSS3 选择 器 外 ， 本 案例 还 采用 了 很 多 CSS3 的 相关 属性 ， 这 些 属性 将 在 后 面 


节 中 进行 详细 介绍 。 例 如 : 
使 用 box-shadow 制作 表格 的 阴影 。 


-bordered {box-shadow: 0 lpx lpx #ccc:} 
回 ”使 用 transition 制作 hover 过 渡 效 果 。 


.bordered tr {transition: all 0.1s ease-1n-out:} 
使 用 gradient 制作 表 头 渐变 色 。 


-borderedth { 

background-color: #dce9f9: 

background-1mage: linear-gradient(to top, #ebf3fc, #dce9f9): 
} 


第 9 步 ， 使 用 CSS3 的 text-shadow 来 制作 文字 阴影 效果 ， 使 用 rgba 改变 颜色 透明 度 等 。 
第 10 步 ， 为 <table> 标 答应 用 bordered 类 样式 。 


<table summary=" 历 届 奥 运 会 中 国 奖牌 数 " class="bordered"> 


7.3.6 设计 数据 分 组 表格 


本 例 通 过 树 形 结构 来 设计 层次 清晰 的 分 类 数据 表格 效果 。 整 个 表格 样式 设计 包含 4 个 技巧 : 

适当 修改 数据 表格 的 结构 ， 使 其 更 利于 树 形 结构 的 设计 。 

加 ”借助 背景 图 像 应 用 技巧 来 设计 树 形 结构 标志 。 

加 ”借助 伪 类 选择 器 来 设计 鼠标 经 过 行 时 变换 背景 闫 色 。 

加 ”通过 边框 和 背景 色 来 设计 列 标题 的 立体 显示 效果 。 

【操作 步骤 】 

第 1 步 ， 新 建 HIMLS 文档 ， 复 制 7.3.1 节 案 例 的 数据 表格 结构 。 

第 2 步 ， 修 改 数据 表 的 结构 。 在 修改 数据 表 结 构 时 ， 不 要 破坏 数据 表 的 基本 结构 ， 主 要 强化 数据 
表格 的 分 组 。 使 用 thead 把 标题 分 为 一 组 (标题 区 域 )， 使 用 多 个 tbody 把 数据 分 为 多 组 (数据 区 域 )。 
根据 数据 分 类 的 需要 ， 在 每 个 tbody 内 部 增加 一 个 合并 的 数据 行 ， 该 行 仅 包含 一 个 单元 格 ， 为 了 避免 
破坏 结构 ， 使 用 colspan="7" 合 并 单元 格 。 修 改 之 后 的 数据 表格 结构 如 下 。 


<table summary=" 历 届 奥 运 会 中 国 奖牌 数 "> 
<caption> 历 届 奥 运 会 中 国 奖 牌 数 </caption> 
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<thead> 
<tr></tr> 
</thead> 
<tbody> 
<tr><td colspan="7"> 第 一 时 期 </td></tr> 
< 
> 
a 1 1 
<tr>...</tr> 
rr> 
<tr>...</tr> 
</tbody> 
<tbody> 
<tr><td colspan="7"> 第 二 时 期 </td></tr> 
<tr>...</tr> 
> 
= 
</tbody> 
<tfoot> 
<tr><th> 合 计 </th><td colspan="6">544 枚 </td></tr> 
</tfoot> 
</table> 


第 3 步 , 重 置 基本 表格 对 象 的 默认 样式 。 例 如 ， 在 body 元 素 中 定义 页 面 字体 类 型 ， 通 过 table 元 


” 素 定义 数据 表格 的 基本 属性 ,以 及 其 包含 文本 的 基本 显示 样式 。 同 时 统一 标题 单元 格 和 普通 单元 格 的 


' 基本 样式 。 

body {font-family:" 宋 体 " arial, helvetica, sans-serif 诺 页 面 字 体 类 型 */ 

}* 页 面 基 本 属性 */ 

table {/* 表 格 基 本 样式 */ 
border-collapse: collapse: 此 合并 单元 格 边框 */ 
font-size: 85%: /# 字 体 大 小 ， 约 为 14px*/ 
line-height: 1.1: 此 行 高 ， 使 数据 显得 更 紧凑 */ 
width: 96%; 旋回 定 宽度 */ 
margin: auto; 话 水 平 大 中 显示 */ 
border:solid 6px #c6ceda; 让 添加 粗 边 框 ， 颜 色 与 标题 行 背景 色 一 致 */ 

} 

th {* 列 标题 基本 样式 */ 
font-weight: normal: 诺 普 通 字 体 ， 不 加 粗 显示 */ 
text-align: left: /# 标 题 左 对 齐 #/ 
padding-left: 1Spx: 诺 定 义 左 侧 补 白 */ 

} 

th, td {padding: .6em .6em:; /* 增 加 补 白 效 果 ， 避 人 免 数 据 拥挤 在 一 起 */ 

}/* 单 元 格 基本 样式 */ 


第 4 步 ， 定义 列 标题 的 立体 效果 。 列 标题 的 立体 效果 主要 借助 边框 样式 来 实现 ， 设 计 项 部 、 左 侧 


”和 右 侧 边框 样式 为 1px 宽 的 白色 实 线 , 而 底部 边框 则 设计 为 2px 宽 的 浅 灰色 实 线 , 这 样 就 可 以 营造 出 
“一 种 淡淡 的 立体 凸 起 效果 。 


thead th,tfoot th, tfoot td {/* 列 标题 样式 ， 立 体 效果 */ 
backeground: #c6ceda: 族 背 景色 */ 
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局 


border-color: #HEEH#HEE #888 #fff; 诺 设 置 立 体 边框 效果 */ | 
border-style: solid: 访 实 线 边 框 样式 */ 
border-width: 1px 1px 2px 1px: 诺 定 义 边框 大 小 */ | 
padding-left: .Sem; 诺 增 加 左 侧 的 补 白 */ | 


| 车 


第 5 步 ， 定 义 树 形 结构 效果 。 树 形 结构 主要 利用 虚线 背景 图 像 〈 和: ) 来 模拟 ， 借 助 背景 图 像 


的 灵活 定位 特性 ， 可 以 精确 设计 出 树 形 结构 样式 。 然 后 使 用 结构 伪 类 选择 器 分 别 把 它们 应 用 到 每 行 的 ， 
第 一 个 单元 格 中 。 
tbody tr td:first-child {/* 树 形 结构 非 末 行 图 标 样式 */ | 
background: url(images/dots.gif) 18px 54% no-repeat: /# 定 义 树 形 结构 末 行 图 标 状 
padding-left: 26px: 诺 增 加 左 侧 的 补 白 */ | 

} 
tbody trlast-child td:first-child {/* 树 形 结构 末 行 图 标 样式 */ | 
background: url(images/dots2.gif) 18px 54% no-repeat: 诺 定 义 树 形 结构 的 末 行 图 标 */ | 
padding-left: 26px: /# 增 加 左 侧 的 补 白 */ 


} 
第 6 步 ， 为 分 类 标题 行 定义 一 个 样式 类 。 通 过 为 该 行 增加 一 个 提示 图 标 ， 以 及 设置 行 背 景色 ， 来 
区 分 不 同 分 类 行 之 间 的 视觉 分 类 效果 。 


tbody tr:first-child td {/* 数 据 分 类 标题 行 的 样式 */ 
background:#eee url(images/arrow.gif) no-repeat 12px 50%:  ”/* 背 景 图 人像， 定义 提示 图 标 */ | 


padding-left: 28px; 让 增 加 左 侧 的 补 白 */ | 
font-weight:bold: 刻字 体 加 粗 显 示 */ 
color:#444; 记 字 体 颜色 */ | 


} 
第 7 步 ， 设 计 当 鼠标 经 过 每 行 时 变换 背景 色 ， 以 此 显示 当前 行 效果 。 ] 


tr:hover td.start:hover, td.end:hover {/* 鼠 标 经 过 行 、 单 元 格 上 时 的 样式 */ 
background: #FF9:; /# 变 换 背 景色 机 
| 


第 8 步 ， 保 存 页 面 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 7.19 所 示 。 


短 一 名 http://localhost 8080/mysite/test.html -BC 


历届 奥运 会 中 国 奖牌 数 


城市 


洛 彬 矶 《美国 > 
况 城 ‘韩国 ) 
巴塞 容 那 ‘ 桓 班 牙 ) 


悉尼 ! 潭 大 利 亚 ) 
雅典 《着 腊 》 


北京 中国) 5 ys 2 | 
伦敦 【英国 》 。 2 
里 约 热 内 卢 《 巴 西 》 


7.19 设计 数据 分 组 表格 效果 | 


。 18/ 。 
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% 


7.3.7 设计 单线 表格 
本 例 在 前 面 案例 数据 表格 结构 的 基础 上 , 使 用 CSS3 技术 设计 一 款 单线 表格 ,效果 如 图 7.20 所 示 。 


| 色 httpy/localhost8080/mysitejtesthtml * 昌 台 | 二 Ilocalhost 


历届 奥运 会 中 国 奖牌 数 
| 城市 金牌 

党 覆 矶 【美国 ) 15 

| 汉城 “韩国 ) 5 

| 巴塞 罗 那 【再 班 牙 ) 16 

| 亚特兰大 (美国 ) 16 

' 悉尼 “澳大利亚 ) 28 

雅典 《希腊 ) 32 

北京 “中 国 ) 51 

伦敦 (英国 ) 38 

| 2 里 约 热 内 卢 (巴西 ) 26 


图 7.20 设计 单线 表格 效果 


【操作 步骤 】 

第 1 步 ， 新 建 HTML5 文档 ， 复 制 7.3.1 节 案 例 的 数据 表格 结构 。 

第 2 步 ， 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type="text/css"> 标 签 ， 在 该 标签 中 输入 下 面 样 
， 式 代码 ， 定 义 表格 默认 样式 ， 并 定义 表格 外 框 主题 类 样式 。 


table { 

*border-collapse: collapse: 此 兼容 下 7 及 其 以 下 版 本 浏览 器 */ 
| border-spacing: 0: 

| width: 100%;: 

} 


第 3 步 ， 设 计 单元 格 和 标题 单元 格 样式 ， 取 消 标题 单元 格 的 默认 加 粗 和 居中 显示 。 
.table td, .table th { 


| padding: 4px: 诺 增 大 单元 格 补 白 ， 避 人 免 拥 挤 */ 

] border-bottom: 1px solid #f2f2f2: 上 定义 下 边框 线 */ 

text-align: left: /# 文 本 左 对 齐 4/ 

font-welghtnormal: 谍 取 消 加 粗 显 示 */ 

| 

第 4 步 ， 为 列 标题 行 定义 渐变 背景 ， 同 时 增加 高 亮 内 阴影 效果 ， 为 标题 文本 增加 淡淡 阴影 色 。 
table thead th { 


text-shadow: 0 lpx lpx rgba(0.0.0,.1): 
border-bottom: 1px solid #cece:; 
background-color: #eee; 
backeround-1mage: linear-gradient(to top, #{5f5f5, #eee); 
} 
| 第 5 步 ， 设 计数 据 隔行 换 色 效果 。 
-table tbody tr:nth-child(even) { 
background: #f515f5; 
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box-shadow: 0 1px 0 rgba(255,255,255,.8) Inset: 


第 6 步 ， 设 计 表 格 圆 角 效果 。 


* 左 上 角 圆 角 */ | 铬 
table thead th:first-child {border-radius: 6px 0 0 0:} i 
性 右 上 角 圆 角 */ ‘Note 
.table thead th:last-child {border-radmus: 0 6px 0 0:} 

必 左 下 角 圆 角 */ 

.table tfoot td:first-child, .table tfoot th:first-child{border-radius: 0 0 0 6px:} 
性 右 下 角 圆 角 */ 

.table tfoot td:last-child,.table tfoot th:last-child {border-radius: 0 0 6px 0:} 


7.3.8 设计 日 历 表 


日 历 表 在 网 页 中 经 常 看 到 ， 它 适合 使 用 表格 结构 进行 设计 。 本 例 设计 一 个 相对 比较 简单 的 日 历 表 ， 。 视频 讲解 
其 中 有 当天 日 期 状态 、 当 天 日 期 文字 说 明 ， 双 休 日 以 红色 文字 、 浅 灰色 背景 显示 ， 周 日 到 周一 的 标题 
加 粗 显示 。 

【操作 步 又】 

第 1 步 ， 司 动 Dreamweaver， 新 建 网 页 ， 保 存 为 index.html， 在 <body> 标 签 内 输入 以 下 代码 。 


<table> 
<caption>2017 年 7 月 1 日 </caption> 
<thead> 
< 
<th> 日 </th> 
<th> 一 一 /也 > 
<th> 二 </th> 
<th> 三 </th> 
<th> 四 </th> 
<th> 五 </th> 
<th> 六 </th> 
</tr> 
</thead> 
<tbody> 
<tr><td>29</td><td>30</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> 
<tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 
<tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td></tr> 
<tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr> 
<tr><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>1</td><td>2</td></tr> 
<tr><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr> 
</tbody> 
</table> 


日 历 表 以 表格 结构 形式 表示 ,不仅 在 结构 上 表达 了 日 历 是 一 种 数据 型 结构 , 而且 能 更 显著 地 在 页 
面 无 CSS 样式 情况 下 表现 日 历 表 应 该 具有 的 结构 ， 如 图 7.21 所 示 。 

第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
样式 ， 设 计 表 格 框 样式 。 | 
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table {/* 定 义 表 格 文字 样式 */ 
border-collapse:collapse; /* 合 并 单元 格 之 间 的 边 */ 
border: 1px solid #DCDCDC: 
font:normal 12px/1.Sem Arial, Verdana, Luclda, Helvetica, sans-sernif: 


} 


x 
| -GE htplocalho- - BO 
2017 年 7 月 1 日 
日 一 二 三 四 五 六 
29301 2 345 
5789 101112 


13 14 15 16 17 18 19 
202122232425 26 
27282930311 2 
3456789 


图 7.21 无 CSS 样式 的 日 历 表 


合并 表格 单元 格 之 间 的 边框 ， 设 计 表 格 内 对 象 的 继承 样式 。 例 如 ， 单 元 格 之 间 的 边框 合并 、 文 字 
样式 。 考 虑 日 历 表 中 显示 的 内 容 以 数字 居多 ， 因 此 文字 主要 采用 了 英文 字体 。 
第 3 步 ， 设 计 表 格 标题 样式 。 设 置 表 头 的 高 度 属性 和 文字 颜色 。 


caption { /* 定 义 表 头 的 样式 ， 文 字 居 中 等 */ 
text-align:center; 
line-height:46px; 
font-size:20px; 
color: blue:; 


} 
第 4 步 ， 设 计 单 元 格 基本 样式 。 
td, th {/* 将 单元 格 内 容 和 单元 格 标题 的 共同 点 归 为 一 组 样式 定义 */ 
width: 40px: 
height: 40px: 
text-align: center; 
border: 1px solid #DCDCDC: 


} 

也 {/* 针 对 单元 格 标题 定义 样式 ， 使 其 与 单元 格 内容 产 生 区 别 */ 
color: #000000: 
background-color: #EEEEEE: 


} 

单元 格 内 容 <td> 标 答 和 单元 格 标题 <th> 标 签 所 需要 的 样式 只 有 背景 颜色 和 文字 颜色 不 同 ， 因 此 可 
以 将 这 两 个 元 素 归 为 一 个 组 定义 样式 ， 然 后 单独 针对 单元 格 标题 定义 背景 颜色 和 文字 颜色 。 这 样 的 处 
理 方 式 不 仅 减少 了 CSS 样式 的 代码 ， 也 能 使 CSS 样式 代码 更 加 直观 ， 对 于 后 期 维护 也 有 不 少 帮助 。 

第 5 步 ， 单 元 格 <td> 标 签 中 所 显示 的 时 间 是 当前 系统 所 显示 的 时 间 ， 添 加 一 个 名 为 current 的 class 


类 名 ， 并 将 其 CSS 样式 定义 的 与 其 他 单元 格 内容 不 同 ， 突 出 显示 当前 日 期 。 而 且 .current 类 还 有 一 个 


作用 是 为 程序 开发 人 员 提 供 一 个 接口 ， 方 便 他 们 在 程序 开发 的 过 程 中 调用 这 个 类 名 , 便于 判断 系统 当 
前 日 期 后 为 页 面 实现 效果 。 


td.current {/* 定 义 当 前 日 期 的 单元 格 内 容 样式 */ 
font-weight:bold; 
color:#FFFFFF: 
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background-color: blue; 
} 


第 6 步 ， 设 计 .curent 类 之 后 ， 把 该 类 绑 定 到 表格 当日 单元 格 中 ， 如 <td class="current">1</td>。 


第 7 步 ， 为 了 能 更 好 地 体现 茶 个 月 份 上 一 个 月 份 的 月 尾 几 天 和 下 一 个 月 份 的 月 头 几 天 在 当前 月 份 ， 


中 的 位 置 ， 可 以 在 页 面 中 添加 以 下 内 容 ， 并 通过 CSS 样式 将 其 视觉 效果 弱化 。 
td.last month, tdnext month {color:#DFDFDF:} /* 定 义 上 个 月 和 下 个 月 日 期 在 当前 月 中 的 文字 颜色 */ 


第 8 步 ， 设 计 .last month 和 .next month 类 之 后 ， 把 这 两 个 类 绑 定 到 表格 非 当 月 单元 格 中 ， 代 码 ， 


如 下 。 


<tr> 
<td class="last month">29</td> 
<td class="last month">30</td> 
<td class="current">1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>5</td> 

</tr> 

“< 
<td class="next month">3</td> 
<td class="next month">4</td> 
<td class="next month">5</td> 
<td class="next month">6</td> 
<td class="next month">7</td> 


<td class="next month">8</td> 


<td class="next month">9</td> 
</tr> 


第 9 步 ， 设 计 表 格 列 组 样式 。 在 表格 框 <table> 内 部 前 面 添 加 如 下 代码 : 


<table> 
<caption> 2017 年 7 月 1 日 </caption> 
<colgroup span="7"> 
<col span="]1" class="day off'> 
<col span="5"> 
<col span="1" class="day off'> 
</colgroup> 
<thead> 


第 10 步 ， 使 用 <colgroup> 标 签 将 表格 前 后 两 列 〈 即 双休日 ) 的 日 期 定义 为 一 种 样式 ， 以 区 别 于 ， 


其 他 单元 格 内 容 中 的 日 期 。 


tr>td, tr>td+td+td+td+td+td+td { 

color:#B3222B; 

background-color:#F 8F8F8; 
} * 定 义 第 一 列 和 最 后 一 列 单 元 格 内 容 〈( 即 双休日 的 样式 */ 
tr>td+td { 


“1915 


(sss 网页 设计 以 入门 到 精通 ( 答 课 精 编 版 ) 


color:#333333; 
background-color:#FFFFFF:; 
} p# 定 义 中 间 5 列 单元 格 内 容 的 样式 */ 
col.day off { 
color:#B3222B; 
backeround-color:#F 8F 8F8; 

} # 针 对 正 浏览 器 定义 双休日 的 单元 格 样 式 */ 

其 中 ，tr>td 子 选择 符 是 为 所 有 的 单元 格 内 容 <td> 标 签 设置 文字 颜色 和 背景 颜色 ; tr>td+td+td+td+ 
tdttd+td 是 子 选 择 符 与 相 邻 选择 符 的 结合 ， 定 义 最 后 一 列 单元 格 内 容 <td> 标 签 的 文字 颜色 和 背景 颜色 ; 
再 次 定义 使 用 tr>tdttd 是 为 除了 第 一 列 以 外 的 所 有 单元 格 内 容 <td> 标 签 定 义 样式 , 但 因为 CSS 优先 级 
的 关系 ， 无 法 覆盖 最 后 一 列 单元 格 <td> 标 签 的 样式 。 最 终结 果 是 前 后 两 列 的 样式 与 中 间 5 列 的 样式 
不 同 。 
col.day off 是 针对 正 浏览 器 而 定义 样式 ， 主 要 是 第 一 列 与 最 后 一 列 的 文字 颜色 和 背景 颜色 。 该 
选择 符 的 定义 方式 需要 XHTML 结构 的 支持 ， 读 者 可 以 查看 XHTML 结构 中 <col> 标 签 选择 控制 列 的 


方式 。 
第 11 步 ， 设 计 完 毕 ， 保 存 页 面 ， 在 浏览 器 中 了 预先， 显示 效果 如 图 7.22 所 示 。 


|- Beato- -sof Gass > 
2017 年 7 月 1 日 


图 7.22 日 历 表 页 面 设计 效果 


7.4 在 线 练习 


本 节 通 过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTML5 设计 表格 结构 和 样式 。 感 兴趣 的 读者 可 
以 扫 码 练习 : (1) 表格 结构 ; (2) 表格 美化 。 


在 线 练习 1 
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章 


使 用 CSS 美化 表单 


表单 是 网 页 交互 的 基础 ,网 站 一 般 都 借助 表单 ， 如 注册 表 、 和 登录 表 、 调 查 表 和 留言 表 等 ， 
实现 用 户 与 服务 器 之 间 的 信息 交流 。HTMLS 新 增 了 很 多 表单 控件 ， 完 善 了 部 分 表单 控件 的 


功能 ， 新 特性 提供 了 更 好 的 用 户 体验 和 输入 控制 。 


【 学 习 重 点 】 

中 正确 使 用 各 种 表单 控件 。 
| 事 担 表单 属性 的 设置 。 
WD 设计 易 用 性 表单 页 面 。 
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8.1 HTMLS 表单 基础 


与 表格 一 样 ， 表 单 也 包含 多 个 标签 ， 它 由 很 多 控件 构成 ， 如 文本 框 、 文 本 区 域 、 单 选 按钮 、 复 选 
框 、 下 拉 沫 单 和 按钮 等 。 一 般 情况 下 ， 表 单 结构 可 分 为 以 下 3 部 分 。 

加 ”表单 框 : 使 用 <form> 标 签 定 义 ， 主 要 功能 为 定义 提交 表单 的 处 理 方法 、URL 和 字符 编码 等 。 

轴 ”表单 对 象 : 包括 文本 框 、 密 码 框 、 隐 藏 域 、 多 行文 本 框 、 复 选 枉 、 单 选 按钮 、 下 拉 选 择 框 、 

文件 上 传 框 、 提 交 按 钮 、 复 位 按钮 和 一 般 按钮 等 。 

加 ”辅助 对 象 : 包括 提示 性 标签 <label>、 表 单 对 象 分 组 标签 <fieldset>, 用 于 表单 结构 的 辅助 设计 。 
| 【示例 】 新建 网 页 ， 保 存 为 test.html, 在 <body> 内 使 用 <form> 标 签 包含 两 个 <input> 标 签 和 一 个 提 
， 交 按钮 ， 并 借助 <p> 标 签 把 按钮 和 文本 框 分 行 显 示 。 
<form action="#" method="get" 1d="form]1" name="form]1"> 

<p> 用 户 名 : <input name="" type="text" /></p> 

<p> 密 码 : <input name="" type="text" /></p> 

<p><input type="submit" value=" 提 交 "/></p> 
</form> 


在 正 浏 览 器 中 预先 ， 则 演示 效果 如 图 8.1 所 示 。 


图 8.1 表单 的 基本 效果 
HTMLS 定义 了 多 个 表单 标签 ， 简 单 说 明 如 表 8.1 所 示 。 


表 8.1 HTML 表单 标签 


标 签 说 明 
<form> 定义 供用 户 输入 的 HTML 表单 
<input> 定义 输入 控件 
<textarea> 定义 多 行 的 文本 输入 控件 
<button> 定义 按钮 
<select> 定义 选择 列表 (下 拉 列 表 ) 
<optgroup> 定义 选择 列表 中 相关 选项 的 组 合 
<option> 定义 选择 列表 中 的 选项 
<label> 定义 inpnut 元 素 的 标注 
<fieldset> 定义 围绕 表单 中 元 素 的 边框 
<legend> 定义 fieldset 元 素 的 标题 
<isindex> 定义 与 文档 相关 的 可 搜索 索引 。 不 赞成 使 用 
<datalist> HIMLS 新 增 标签 ， 定 义 下 拉 列 表 
<keygen> HIMLS 新 增 标签 ， 定 义 生 成 密 钥 
<output> HIMLS 新 增 标签 ， 定 义 输出 的 一 些 类 型 
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<input> 标 签 是 通用 输入 型 表单 对 象 , 使 用 它 可 以 定义 多 种 类 型 的 表单 对 象 ， 另 外 HIMLS 又 扩展 | 
了 很 多 输入 型 表单 对 象 ， 简 单 说 明 如 表 8.2 所 示 。 


表 8.2 ”<input> 标 签 可 定义 的 输入 型 表单 对 象 


疡 

表单 对 象 说 明 于 、 
<input type="text"> 单行 文本 输入 框 
<input type="password"> 密码 输入 框 〈 输 入 的 文字 用 点 号 表示 ) 
<input type="checkbox"> 复 选 框 
<input type="radio"> 单 选 按 钮 
<Input type="file"> 文件 域 
<input type="submit"> 将 表单 〈formm) 里 的 信息 提交 给 表单 属性 action 所 指 回 的 文件 


将 表单 〈form) 里 的 信息 清空 ， 重 新 填写 
HIMLS 新 增 对 象 ， 颜 色 选 择 需 


<Input type="reset"> 


<input type="color"> 


<input type="date"> HTMLS5 新 增 对 象 ， 日 期 选择 器 

<input type="time"> HIMLS 新 增 对 象 ， 时 间 选 择 器 

<input type="datetime"> HIMLS 新 增 对 象 ，UTC 日 期 时 间 选 择 器 
<input type="datetime-local"> | HIMLS 新 增 对 象 ， 本 地 日 期 时 间 选 择 器 
<input type="week"> HTMLS5 新 增 对 象 ， 选 择 第 几 周 的 文本 框 
<input type="month"> HIMLS 新 增 对 象 ， 月 份 选择 器 

<input type="email"> HIMLS 新 增 对 象 ，Email 输入 框 

<input type="tel"> HIMLS 新 增 对 象 ， 电 话 号 码 输 入 框 

<input type="url"> HIML3S 新 增 对 象 ，URL 输入 框 

<input type="number"> HTMLS5 新 增 对 象 ， 只 能 输入 数字 的 文本 框 
<input type="range"> HTMLS5 新 增 对 象 ， 拖 动 条 或 滑 块 

<input type="search"> HIML3S 新 增 对 象 ， 搜 索 文 本 框 ， 与 “type="text";” 的 文本 框 没有 太 大 区 别 


8.2 案 


例 实战 


Css 没有 为 表单 定义 专用 属性 ， 不 过 可 以 使 用 CSS 其 他 属性 ， 如 字体 、 背 景 、 颜色、 边框 、 边 ， 
距 等 来 设计 表单 样式 。 注 意 ， 由 于 部 分 表单 对 象 是 相对 复杂 的 控件 ， 如 下 拉 菜单 、 文 件 域 、 复 选 杠 、 
单 选 按钮 等 ， 使 用 CSS 可 能 无 法 完美 控制 其 外 观 ， 必 要 时 需要 Javascript 脚本 辅助 实现 。 


8.2.1 设计 登录 表单 


本 例 设计 一 球 个 性 的 登录 表单 页 面 ， 效 果 如 图 8.2 所 示 。 
【操作 步骤 】 
第 1 步 ， 新 建 HTMLS5 文档 ， 保 存 为 index.html。 打 开 网 页 文档 ， 设 计 如 下 表单 结构 : 
<form 1d="login-form" action="#" method="post"> 
<fieldset> 
<legend> 登 录 </legend> 
<label for="login">Email</label> 
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<Input type="text" 1d="login" name="login"/> 
<div class="clear"></div> 
<]abel for="password"> 密 人 码 </label> 
<Input type="password" 1d="password" name="password"/> 
<div class="clear"></div> 
<label for="remember me" style="padding: 0;"> 记 住 状态 ?</label> 
<Inpnult type="checkbox" 1d="remember me" name="remember me"/> 
<div class="clear"></div><br /> 
<input type="submit" class="button" name="commit" value=" 登 录 "/> 
</fieldset> 
</form> 
<p align="center"><strong>&copy; WWW.XXxXxxx.cn</strong></p> 


图 8.2 设计 网 站 登录 页 面 效果 


第 2 步 ， 为 form 元 素 定义 id 属性， 以便 对 整个 表单 进行 控制 ， 同 时 方便 设计 ID 样式 。 

第 3 步 ， 新 建 CSS 样式 表 文 件 ， 命 名 为 style.css， 保 存 到 images 文件 夹 中 ， 然 后 在 页 面 涉 部 区 
域 导 入 该 样式 表 。 

<link rel="stylesheet" type="text/css" hre 伟 "Images/style.css" /> 

第 4 步 ， 通 过 通 配 选择 器 清除 页 面 中 所 有 标签 的 内 外 边 距 。 

* {margin: 0; padding: 0;} 

第 5 步 ， 在 body 元 素 中 定义 网 页 字体 效果 ， 如 类 型 、 大 小 和 颜色 。 设 计 网 页 背景 图 像 ， 并 让 背 
景 图 像 俩 上 居中 显示 ， 茶 止 平 铺 ， 同 时 设置 背景 图 像 无 法 获 盖 的 区 域 颜 色 为 浅 灰 色 (#c4c4c4)。 

body {font-family: Georgla，senf background: url(login-page-bg.jpg) center -SOpx no-repeat #c4c4c4:; color: 
#3a3a3a:} 

第 6 步 ， 定 义 清除 样式 类 ， 以 便 控 制 页 面 中 每 个 表单 域 的 换行 显示 。 

.Clear {clear: both;} 

第 7 步 ， 设 计 表单 对 象 样式 。 其 中 通过 属性 选择 器 控制 复 选 框 的 样式 。 


form {width: 406px: margin: 120px auto 0;} 

legend {display: none;} 

fieldset {border: 0:} 

label {width: 11Spx: text-align: right; float: left margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px;:} 

Input {width: 220px; display: block:; padding: 4px; margin: 0 0 10px 0; font-size: 18px; color: #3a3a3a; font-family: 
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Georgla, serif:} 
input[type=checkbox] {width: 20px; margin: 0; display: mline-block;} 


第 8 步 ， 设 计 按钮 在 鼠标 经 过 和 未 经 过 时 的 状态 样式 。 


| 
.button {background: url(button-bg.png) repeat-x top center; border: lpx solid #999; -moz-border-radius: Spx; | 


padding: Spx; color: black; font-weight: bold; -webkit-border-radius: Spx; font-size: 13px:; width: 70px:;} 
.button:hover {background: white; color: black:} 


8.2.2 设计 信息 登记 表 
在 设计 表单 时 ， 正 确 选用 各 种 表单 控件 很 重要 ， 这 是 结构 标准 化 和 语义 化 的 要 求 ， 也 是 用 户 体验 ， 
的 需要 。 例 如 : | 

回 不 确定 答案 可 以 建议 用 户 输 入 ， 而 不 是 让 用 户 选 择 ， 如 姓名 、 地 址 、 电 话 等 常用 信息 ,使 用 
输入 的 方式 收集 会 比 使 用 选择 的 方式 收集 更 加 自然 且 简单 。 

回 ”对 于 容易 记 错 的 答案 不 妨 让 用 户 选 择 , 此 时 就 不 适合 让 用 户 使 用 输入 框 来 输入 , 如 国家 、 年 、 
月 、 日 、 星 座 等 ， 可 以 使 用 单 选 按钮 组 、 复 选 框 、 列 表 框 、 下 拉 菜 单 等 形式 。 | 

加 ” 当 设计 选择 项 目 时 ， 如 果 和 希望 用 户 浏览 所 有 选项 ， 则 应 该 使 用 单 选 按 钮 组 或 复 选 框 组 ,而 不 
应 该 使 用 下 拉 菜 单 。 下 拉 菜 单 会 隐藏 部 分 选项 ， 对 于 用 户 来 说 ， 可 能 不 会 耐心 地 逐个 浏览 每 
个 菜单 项 。 

加 ”当选 项 很 少时 ， 不 妨 考 虑 使 用 单 选 按钮 组 或 复 选 框 组 ， 而 设计 过 多 的 选项 时 ， 使 用 单 选 按钮 
组 或 复 选 框 组 会 占用 很 大 的 页 面 ， 此 时 不 妨 考 虑 使 用 下 拉 菜 单 。 

回 ”多 项 选择 可 以 有 两 种 设计 方法 : 使 用 复 选 框 和 使 用 列表 框 。 使 用 复 选 框 比 使 用 列表 框 更 直观 ， 
而 列表 框 的 作用 和 操作 方法 不 够 清晰 ， 有 时 还 需要 为 其 加 上 说 明 性 文字 ， 显 然 这 样 做 没有 使 上 
用 复 选 框 简单 。 

回 “为 控件 设置 默认 值 ， 建 议 采 用 一 些 提示 性 说 明文 字 或 常用 值 ， 能 够 提醒 用 户 输入 ,这 是 一 个 ， 
很 人 性 化 的 设计 ， 应 该 考虑 。 | 

回 ” 对 于 单 选 按钮 组 、 复 选 框 或 下 拉 菜单 ， 设 计 控 件 的 value 属性 值 或 显示 值 时 应 从 用 户 的 角度 ， 
考虑 ， 努 力 使 用 户 浏览 选项 时 更 方便 、 简 单 ， 避 免 出 现 歧义 或 误解 的 值 。 

加 ”对 于 单 选 、 复 选 的 选项 ， 应 减少 选项 的 数量 ， 同 时 也 可 以 使 用 短语 来 作为 选项 。 | 

回 “” 对 于 选项 的 排列 顺序 ， 最 好 遵循 合理 的 逻辑 顺序 ， 如 按 首 字母 排列 、 按 声母 排列 等 ， 并 根据 ， 
普遍 情况 确定 默认 值 。 | 

回 ”用 户 在 设计 表单 时 ,还 应 该 避免 使 用 多 种 表单 控件 ,使 用 多 种 表单 控件 能 够 使 页 面 看 起 来 更 


好 看 ， 但 实际 上 不 利于 用 户 的 操作 。 


下 面 介 绍 如 何 设计 一 个 信息 登记 表 。 

【操作 步骤】 

第 1 步 ， 启 动 Dreamweaver， 新 建 HTMLS 文档 ， 保 存 为 index.html。 

第 2 步 ， 在 页 面 中 构建 HITML 导航 框架 结构 。 切 换 到 代码 视图 ,在 <body> 标 签 内 输入 下 面 代 码 ，， 
定义 表单 框架 结构 。 


<form action="#" class="form]"> 


<p><em>*</em> 号 所 在 项 为 必 填 项 </p> <!-- 提 示 上 段落 --> 
<fieldset class="fld1"> <!-- 字 段 集 1--> 
<legend> 个 人 信息 </legend> <!-- 字 段 集 1 标题 --> 
<ol> <!-- 字 段 集 1 内 嵌 列 表 --> 
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<]1> 
<]label for="name"> 姓 名 <em>*</em></label> ”<!-- 说 明 标签 ， 以 下 类 同 --> 
<Inpnut 1d="name"> 
</l> 
=I 
<label for="address"> 地 址 <em>*</em></label> 
<Inpnut 1d="address"> 
</l> 
<]1> 
<label for="dob"> 出 生 <span class="sr"> 日 </span><em>*</em></label> 
<select 1d="dob"> 
<option value="1">1</option> 
<option value="2">2</option> 
</select> 
<label for="dob-m" class="sr"> 月 <em>*</em></label> 
<select 1d="dob-m"> 
<option value="1">Jan</option> 
<option value="2">Feb</option> 
</select> 
<label for="dob-y" class="sr"> 年 <em>*</em></label> 
<select 1d="dob-y"> 
<option value="1979">1979</option> 
<option value="1980">1980</option> 
</select> 
< 中 > 
<]1> 
<]label for="sex"> 性 别 <em>*</em></label> 
<select 1d="sex"> 
<option value="female"> 女 </option> 
<option value="male"> 男 </option> 
</select> 
</l> 
</ol> 
</fieldset> 
<fieldset class="fld2"> <!-- 字 有 段 集 2--> 
<legend> 其 他 信息 </legend> <!-- 字 段 集 2 标题 --> 
<ol> <!-- 字 段 集 1 内 惧 列 表 --> 
<]1> 
<fieldset> <!-- 列 表 内 嵌 字 段 集合 --> 
<legend> 你 喜欢 这 个 表单 吗 ? <em>*</em></legend><!-- 子 字段 集合 标题 --> 
<label><input name="invoice-address" type='"radio"> 喜 欢 </label> 
<label><input name="invoice-address" type='"radio"> 不 喜欢 </label> 
</fieldset> 
</l> 
<]1> 
<fieldset> 


<legend> 你 喜欢 什么 运动 ?</legend> 

<label for="football"><input id="football" type="checkbox"> 足 球 </label> 
<label for="golf'><input 1d="basketball" type="checkbox"> 和 篮球 </label> 
<label for="rmgby"><input id="ping" type="checkbox"> 乒 乓 球 </label> 
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</fieldset> 
< 中 > 
一 ]1> 
<fieldset> 
<legend> 请 写 下 你 的 建议 ? <em>*</em></legend> ] Ey 
<label for="comments"><textarea 1d="comments" rows="7" cols="25"></textarea></label> oi A 
</fieldset> 
有 Note 
</ol> 
</fieldset> 
<input value=" 提 交 个 人 信息 " class="submit" type="submit"> 
</form> 


第 3 步 ， 在 <head> 标 签 内 输入 <style type="text/css">， 定 义 一 个 内 部 样式 表 ， 然 后 在 <style> 标 签 ， 
内 输入 下 面 样式 代码 : | 


body {/* 定 义 页 面 基本 属性 */ 
font: normal 12px "宋体 ", Helvetica, Verdana, Arial:} 
p {必定 义 段落 属性 */ 
margin: 10px 0; 
text-align:rnight:} 
ul ol dl, li, dt, dd {/* 定 义 列表 相关 元 素 属性 */ 
list-style-type:none: 计 清 除 样式 */ 
margin:0 0 0 lem: /# 清 除 边 界 ， 并 定义 左边 界 为 1 个 字 宽 */ 
padding:0: 上 * 清 除 补 白 */ 
} 
form {/* 定 义 表单 域 基本 属性 */ 
padding:2em:; 诺 定 义 补 白 空 阶 */ 
border:solid 1px #E7F8C4: /# 定 义 表 单 域 边界 妆 
text-align:center:; 诬 居 中 对 齐 ， 实 现 按 钮 居中 显示 */ 
} 
fieldset {/* 定 义 字 上 段 集 基 本 属性 */ 
text-align:left: 诺 左 对 齐 */ 
} 
legend {/* 定 义 字 有 段 集 标题 属性 */ 
padding: 0: 记 清 除 补 白 */ 
margin:0; 记 清 除 边界 */ 
color: #000: 话 标 题 颜 包 */ 
font-weight:bold:; 席 标 题 加 粗 显 示 */ 
} 
li legend {/* 定 义 列表 内 帷 字段 集 标题 属性 */ 
font-weight:normal; 记 清 除 加 粗 显 示 */ 
} 
input, textarea, select {/* 定 义 表单 控件 基本 属性 */ 
margin: 0; 人/# 定 义 边 界 为 0*/ 
padding: 0: 诺 定 义 补 白 为 0*/ 
} 
.ST {/* 定 义 label 内 补充 信息 属性 */ 
position: absolute: 诬 绝 对 定位 */ 
left: -9999em: 话 隐 藏 显示 ， 只 对 机 器 搜索 使 用 */ 
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| form.forml {/* 定 义 表单 属性 */ 
width: 370px: /# 定 义 表单 宽 科 
font-size: 1.1em: /# 定 义 表 单字 体 大 小 所 
color: #333: /# 定 义 表 单字 体 颜色 部 
会 | background: #fff url(fieldset.gif) left bottom repeat-x: /# 定 义 表 单 背 景 图 像 志 
i } 
Note form.form1l fieldset {/* 定 义 字 段 集 边框 属性 */ 
border: none: * 清 除 边 框 */ 
border-top: 1px solid #C9DCA6: 诺 显 示 顶 部 边框 */ 


} 
form.forml .fdl li {/* 定 义 字 段 集 1 内 列表 项 的 补 白 */ 
| padding: 4px:} 
form.forml .fld2 li {/* 定 义 字 段 集 2 内 列表 项 的 补 白 */ 
Rn 
li fieldset label {/* 定 义 内 惧 字 段 集 列表 项 的 左 补 白 距离 */ 
padding:0 0 0 2em:} 


第 4 步 ， 保 存 文档 ， 按 F12 键 ， 在 浏览 器 中 预先 ， 则 效果 如 图 8.3 所 示 。 


| http://localhost/mysite/index.html 


I 出 生 *# Jan Y] [1979 Y] 
性 别 * 
-其 他 信息 
你 喜欢 这 个 表单 吗 ? > 
O 〇 喜欢 。” “ 〇 不 喜欢 
| 你 喜欢 什么 运动 ? 
中 足球 口 次 了 球 
请 写 下 你 的 建议 ? * 


妥 训 不 大 信和 


| 图 83 定义 表单 结构 

9 检 ”8.2.3 设计 易 用 表单 

表单 设计 应 考虑 用 户 的 易 用 性 ， 不 恰当 的 表单 布局 ， 如 控件 摆 放 位 置 、 对 齐 方式 、 标 签 信 息 与 周 
， 围 元 素 的 设计 都 会 或 多 或 少 影响 用 户 的 操作 。 为 此 ,用户 在 设计 表单 布局 时 ， 不 妨 从 下 面 几 个 角度 思 
， 考 ， 来 提高 自己 的 设计 水 平 。 

| 1. 排列 方式 


上 根据 习惯 ,表单 控件 一 般 使 用 垂直 排列 方式 进行 分 布 ， 这 样 能 够 加 快 视觉 的 移动 和 操作 。 水 平 排 
] 列 容 易 使 视觉 移动 起 来 很 累 ， 即 使 多 列 有 规律 的 布局 也 是 不 可 取 的 ， 人 眼 左 右 晃 动 操作 很 容易 出 错 ， 
如 图 8.4 所 示 (indexl.html )。 
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8.4 水 平 排列 方式 


2. 控件 分 组 

给 控件 分 组 也 是 表单 布局 中 一 个 重要 技巧 ， 特 别 是 表单 控件 很 多 时 ,分 组 就 显得 很 有 和 必要， 实际 
上 分 组 是 帮助 用 户 进 行 逻辑 梳理 ， 避 人 免 混 乱 。 

如 图 8.5 所 示 (index2.html), 表单 域 由 于 没有 实现 分 组 , 看 起 来 很 混乱 , 这 样 就 会 影响 操作 速度 ， 
每 填写 一 项 信息 都 需要 短暂 的 停留 ， 并 进行 思考 。 如 果 将 其 分 为 3 组 : 个 人 信息 、 地 址 和 联系 信息 ， 
用 户 在 填写 表单 时 思路 就 会 很 清晰 。 


3. 缩 进 分 布 


当 分 组 标题 、 控 件 和 提示 信息 都 并 列 排 在 一 起 时 ， 很 容易 出 现 主 次 不 分 的 情况 ， 如 图 8.6 所 示 
(index3.html)。 用 户 需 要 分 辨 哪些 是 操作 的 行 ， 哪 些 是 说 明 性 文字 ， 这 样 会 影响 操作 速度 。 对 此 ， 
可 以 采用 缩 进 的 方式 ， 实 现 多 层次 登 进 ， 帮 助 用 户 快速 进行 阅读 。 


x 
© > 看 htte://localhost/m 虽 v 凡 6 看 六 全 分 E x 全 克 过 


2 EE http;//localhost/m 只 ~ 


8.5 控件 未 分 组 图 8.6 “未 缩 进 分 布 | 


4. 标签 突出 


一 般 标 签 与 控件 水 平 并 列 分 布 是 最 佳 分 布 方式 。 部 分 用 户 喜欢 使 用 垂直 分 布 方式 ,， 即 标签 在 上 一 
行 ， 控 件 在 下 一 行 ， 这 种 方式 对 于 内 容 较 少 的 表单 域 来 说 可 行 ， 但 如 果 是 一 个 大 型 表单 ， 这 种 方式 会 
消耗 用 户 的 视力 ， 降 低 操 作 速 度 。 

在 表单 布局 中 ， 推 荐 使 用 加 粗 的 标签 ， 这 可 以 增加 它们 的 视觉 比重 ， 提 高 其 显著 性 ， 如 图 8.7 所 
示 〈index4.html)。 人 否则 ， 从 用 户 的 角度 分 析 ， 标 签 与 输入 框 的 文字 类 似 ， 可 能 会 产生 混 消 的 现象 。 
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填写 内 容 。 对 此 ， 可 以 根据 实际 情况 有 选择 地 使 用 标签 左右 对 齐 方式 。 
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5. 标签 对 齐 
关于 标签 是 左 对 齐 还 是 右 对 齐 问 题 , 一般 来 说 ,， 一致 的 左 对 齐 可 以 减少 眼睛 移动 和 处 理 时 间 。 左 


”对 齐 的 标签 还 容易 通 览 表单 信息 ,用 户 只 需要 上 下 看 看 左 侧 标 签 即 可 ， 而 不 会 被 控件 打 断 思路 。 但 这 
， 样 也 容易 使 标签 与 其 对 应 的 控件 之 间 的 距离 被 更 长 的 标签 拉 大 ， 从 而 影响 操作 表单 的 时 间 , 用 户 必须 
”左右 来 回 移动 视线 找到 两 个 对 应 的 标签 和 控件 。 


而 标签 右 对 齐 布局 就 会 避免 这 个 问题 ， 使 得 标签 和 控件 之 间 的 均匀 分 布 并 保持 更 紧密 联系 ， 如 
8.8 所 示 (index5.html)。 当 然 这 样 分 布 的 缺点 是 标签 左边 参差 不 齐 的 空白 会 影响 用 户 快 速 检索 表单 


x 
a ye -3 ES procahosmysie/n p -sc A 大宇 


3Ubmtt 


图 8.7 标签 突出 图 8.8 标签 右 对 齐 


6. 背景 和 辅助 线 

上 面 所 介绍 的 是 一 些 基本 的 布局 方法 , 实际 上 改善 表单 布局 的 方法 还 比较 多 ,尝试 为 表单 控件 适 
当 添 加 背景 色 和 分 隔 线 ， 通 过 背景 色 和 辅助 线 的 视觉 区 分 ， 也 能 加 快 用 户 操作 速度 ， 这 对 于 划分 操作 
区 信息 是 很 有 效 的 。 

背景 色 和 线条 对 于 区 分 表单 的 主要 操作 按钮 尤其 有 效 。 但 在 使 用 这 些 辅助 元 素 时 ， 要 避免 它们 影 
啊 用 户 的 操作 ， 因 为 色彩 过 浓 的 线条 和 背景 色 都 能 够 分 散 用 户 的 视线 ， 如 图 8.9 所 示 (index6.html)， 
过 多 的 分 隔 线 给 用 户 阅 读 带 来 障碍 。 

7. 动态 效果 

当 用 户 选 中 或 操作 某 个 表单 控件 时 ， 当 前 表单 对 象 会 显示 为 另 一 种 样式 ， 以 区 别 于 其 他 控件 。 这 
个 技巧 对 于 用 户 的 操作 具有 提示 作用 ， 避 免 出 现 用 户 有 时 不 知 当前 操作 的 是 哪个 表单 控件 的 情况 ， 如 
图 8.10 所 示 (index7.html)。 

当 表 单 控 件 很 多 时 ， 通 过 添加 类 样式 ， 就 可 以 让 表单 更 具 提 示 性 ， 也 使 用 户 有 更 好 的 体验 。 即 为 


， 茶 个 控件 定义 伪 类 ， 如 :hover、:focus 及 :focus:hover 属性 样式 ， 让 输入 框 被 鼠标 激活 时 更 加 突出 ， 利 
， 于 用 户 集中 精神 填写 。 当 然 这 对 于 老 版 本 的 正 浏览 器 没有 作用 , 此 时 用 户 需 要 使 用 JavaScript 脚本 来 


控制 。 
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其 
> 种 http://localhost/mysite/ 人 Dv 明 心 号 localhost x 价 妇 过 


流 : | 选择 您 所 用 的 探 作对 统 [v] 
省 从 ;| 广东 | 口 | 陕 百 [ 吕 | 尖 TO 江西 [| 
二 动 口 | 上 局 口 j 听 到 未 口 ] 看 书 加 | 


中 文 是 一 个 闻 


中 文 星 两 个 字 节 t 


图 8.9 背景 和 辅助 线 图 8.10 动态 效果 


8.2.4 设计 注册 表单 


表单 设计 中 ， 一 般 用 户 喜 欢 设 计 表 单 对 象 的 边框 ， 以 便 实 现 表单 与 页 面 整 体 效 果 的 融合 。CSS 盒 
模型 适用 任何 表单 对 象 ， 所 以 可 以 使 用 任何 盒 模型 属性 来 定义 表单 对 象 。 注 意 ， 除 了 form 元 素 是 块 
状元 素 外 ， 其 他 元 素 都 以 内 联 元 素 显 示 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 HIMLS 文档 ， 保 存 为 index.html。 

第 2 步 ， 在 页 面 中 构建 HIML 导航 框架 结构 。 切 换 到 代码 视图 ， 在 <body> 标 签 内 输入 下 面 代码 ， 
定义 表单 框架 结构 。 


<div 1d="box"><form 1d=forml] action=#public method=post enctype=multipart/form-data> 
<h2> 个 人 信息 注册 表单 </h2> 
<ul> 

<]i class="label"> 姓 名 

<]> <input 1d=field] size=20 name=field1> 

<li class="label"> 职 业 

<]> <input name=field2 1d=field2 size="25"> 

<]i class="label"> 详 细 地 址 

<]><Iinput name=field3 1d=field3 slze="S0"> 

<]i class="label"> 邮 编 

<]i><Iinput name=field4 1d=field4 size="12" maxlength="12"> 

<]i class="label"> 省 市 

<l1><nput 1d=fields name=fieldS> 

<]i class="label"> 国 家 

<]i> <select 1d=field6 name=field6> 
<option value=china>China</option> 
<option value=armenia>Armenia</option> 
<option value=australia>Australia</option> 
<option value=1taly>Italy</option> 
<option value=]apan>Japan</option> 

</select> 


-一 ~- 一 一 ~ 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 -一 一 一 一 一 一 一 一 一 一 -一 一 一 一 一 一 一 一 一 -一 一 一 一 -一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 一 一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 一 一 一 一 一 -一 一 一 一 -一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 -一 -~ 一 一 一 -一 -一 一 一 一 
i 
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<li class="label">Email 

<]i><Input 1d=field7 maxlength=255 name=fieldl11> 

<li class="label"> 电 话 

<]i><Input maxlength=3 size=6 name=field8>- 

<Input maxlength=8 size=16 name=field8-1> 

<]i class="label"><input id=saveform type=submit value= 提 交 ></li> 
</ul> 
Note </form> </div> 


第 3 步 ， 在 <head> 标 签 内 输入 <style type="text/css">， 定 义 一 个 内 部 样式 表 ， 然 后 在 <style> 标 签 
内 输入 下 面 样式 代码 。 


body { 
margin: 0; padding:0; 
font-famlly: "lucida grande", tahoma, arlal, verdana, sans-sernif:} 
#box{ 
background:url(images/bg1.jpg); 
width:1015Spx: height:770px:} 
#forml { 
width:450px; 
text-align:left: font-size: 12px: 
padding:12px 32px: margin:0 auto:} 
#forml h2 { 
border-bottom:dotted lpx #E37EASG:; 
text-align:center; 
font-weight:normal; /# 清 除 标题 加 粗 默 认 样式 类 


} 
ul {/* 清 除 列表 样式 */ 
padding:0; margin:0; 
list-style-type:none:;} 
input {border:groove #ccc 1px;} ”/* 定 义 3D 四 槽 立体 效果 状 
.field6 {color:#666:; width:32px:} 


.label { 
font-size: 1 3px;: font-weight:bold: 
margin-top:0.7em:} 


第 4 步 ， 保 存 文档 ， 按 F12 键 ， 在 浏览 器 中 预览 ， 则 效果 如 图 8.11 所 示 。 


EY hep ocalhosmysiender himl D+ Bo nm 大风 
个 人 信息 注册 表单 


PE 


图 8.11 设计 注册 表单 
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8.2.5 设计 联系 表单 


本 例 设计 一 个 联系 表单 ， 使 用 CSS 背景 图 像 来 设计 表单 样式 ， 使 其 更 具 艺 术 化 。 
【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 HIMLS 文档 ， 保 存 为 index.html。 
第 2 步 ， 在 页 面 中 构建 HTML 导航 框架 结构 。 切 换 到 代码 视图 ， 在 <body> 标 签 内 输入 下 面 代码 ， 革 做 
定义 表单 框架 结构 。 


<form 1d="fieldset" action="default.asp" method="post"> 

<h2> 联 系 表单 </h2> 

<label for=name> 姓 名 </label> 

<Inpnut class="textfield" 1d="name" name="name"><br> 

<label for=email>Email</label> 

<Input class="textfield" 1d="email" name="email"><br> 

<label for=website> 网 址 </label> 

<Inpnut class="textfield" 1d= "webslte" value="http://" name="website"><br> 

<label for=comment> 反 馈 </label> 

<textarea class="textarea" 1d="comment" name="comment" rows="15" cols="30"></textarea><br> 

<label for=submit>&nbsp:;</label> 

<input class="submit" 1d="submit" type="submit" value=" 提 区 " name="submit"> 
</form> 


第 3 步 ， 在 <head> 标 签 内 输入 <style type="text/css">， 定 义 一 个 内 部 样式 表 ， 然 后 在 <style> 标 签 ， 
内 输入 下 面 样式 代码 。 


body {定义 页 面 属性 */ 
font-size: 12px: /# 定 义 字 体 大 小 #/ 
margin: S0pX: /# 定 义 边界 ， 避 免 顶 部 跑 到 页 面 外 边关 
color: #666: 此 定义 颜色 */ 
font-family: 宋体 , verdana, arial, helvetica, sans-serif: /# 定 义 字 体 #/ 
} 
#fieldset {/* 定 义 表 单 属性 */ 
border: #fff Opx solid: 计 清 除 边 框 */ 
width: 300px: 话 定 义 表单 域 宽度 */ 
background-color: #ccc: 旋 定 义 浅 灰 色 背 景 */ 
} 
#fieldset h2 {/* 定 义 表单 标题 属性 */ 
padding: 0.2em: 诺 定 义 补 白 ， 增 加 边缘 空隙 */ 
margin:0; 访 清 除 标 题 预定 义 边 界 */ 
position: Telative: 谍 相 对 定位 */ 
top: -lem:; 记 在 现 有 流 位 置 铝 上 移动 一 个 字体 距离 */ 
background: url(h2 bg.gif) no-repeat: /# 定 义 背景 图 像 ， 圆 角 显 示 闷 
width: 194px: /# 定 义 宽度 ， 该 宽度 与 背景 图 像 宽 相 同 状 
font-size: 2em: /# 定 义 字 体 大 小 #/ 
color: #fff: 诺 定 义 字 体 颜 色 */ 
white-space: pre: 诺 保 留 标 题 预定 义 格 式 ， 可 以 保留 多 行 显示 */ 
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} 


letter-spacing: -1px:; 
text-align:center; 


#fieldset label {/* 定 义 表 单 标签 属性 */ 


padding: 0.2em: 
margin: 0.4em Opx Opx; 
float: left: 

width: 70px:; 

text-align: Tlght: 


} 
.br {/* 隐 藏 换行 标签 ， 也 不 占据 位 置 */ 


display: none;} 


.textfield {/* 定 义 输入 表单 控件 */ 


} 


border: #fff Opx solid:; 

padding: 3px 8px; 

margin: 3px; 

width: 187px: 

height: 20px; 

backeground: url(textfield bg.gif) no-repeat:; 
color: #FFOOFF: 

font: 1.lem verdana, arial, helvetica, sans-serif: 


textarea {/* 定 义 文本 域 控件 属性 */ 


} 


border: #fff Opx solid; 

padding:4px 8px: 

margin: 3px:; 

height: 150px:; 

width: 190px: 

backeground: url(textarea bg.aif) no-repeat; 
color: #FFOOFF: 

font: 1.lem verdana, arial, helvetica, sans-serif: 


submit {/* 定 义 按钮 控件 属性 */ 


} 


border: #fff Opx solid:; 

margin: 6px; 

width: 80px; 

height: 20px; 

background: Url(submit.glf no-repeat: 
text-transform: Uppercase; 

font: 1.lem verdana, arlal helvetica, sans-senif: 
color: #666; 
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/# 收 缩 字 距 光 
让 居中 显示 */ 


谍 增 加 边 距 空隙 */ 

虑 增加 顶部 边界 ， 加 大 与 上 一 个 控件 的 间距 */ 
诺 癌 左 浮动 */ 

让 定义 宽度 */ 

此 右 对 齐 */ 


话 清 除 边框 */ 

诺 增 加 内 容 边 距 空隙 */ 

话 定 义 边界 距离 */ 

库 定 义 宽 */ 

/# 定 义 高 机 

/# 定 义 输入 表单 控件 背景 图 像 多 
人/# 定 义 表 单 显示 字体 颜色 癌 / 

/# 定 义 字 体 属 性 交 


/# 清 除 边 框 和 

访 增 加 内 容 边 距 ， 避 免 内 部 文本 顶 到 边框 边 */ 
/# 定 义 边界 距离 #/ 

/# 定 义 高 机/ 

/# 定 义 宽 #/ 

上 # 定 义 文本 域 表单 控件 背景 图 像 %/ 

/# 定 义 表 单 显示 字体 颜色 间 

/# 定 义 字体 属性 志 


话 清 除 边框 */ 

/# 定 义 边界 距离 * 

/# 定 义 宽 所 

人/#* 定 义 高 权 

诺 定 义 按 钮 控件 背景 图 像 */ 
话 英 文大 写 显示 */ 

/# 定 义 字体 属性 #/ 

诺 定 义 字 体 颜 色 */ 


第 4 步 ， 保 存 文档 ， 按 F12 键 ， 在 浏览 右 中 预览 ， 则 效果 如 图 8.12 所 示 。 
关于 背景 图 像 的 应 用 还 是 比较 灵活 的 ， 用 户 可 以 充分 发 挥 想 象 力 ， 设 计 出 更 具 创 意 的 表单 效果 。 
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”例如 ， 要 制作 动态 表单 ， 先 制作 好 动态 的 GIF 图 像 ， 然 后 引入 即 可 。 
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图 8.12 设计 联系 表单 


8.2.6 设计 高 亮 样式 


高 襄 捍 示 志 单 
姓名 : 


邮箱: 


图 8.13 ”高 玩 提 示 表 单 效果 


【操作 步 又】 
第 1 步 ， 新 建文 档 ， 在 <body> 标 签 中 输入 下 面 代码 ， 构 建 一 个 表单 结构 ， 该 结构 是 在 8.2.5 节 示 
例 基础 上 重新 定义 的 。 


<form 1d="forml" name="forml1" method="post" action=""> 
<fieldset> 
<legend> 高 亮 提 示 表 单 </legend> 
<label for="name" class="title"> 姓 名 : </label> 
<Input size="40" name="name" class="inputl"> 
<]label for="email" class="title"> 邮 箱 : </label> 
<Inpnut size="40" name="email" class="inputl1"> 
<label for="url" class="title"> 网 址 : </label> 
<Inpnut size="40" name="url" class="inputl"> 
<label for="subject" class="title"> 主 题 : </label> 
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<Input size="40" name="subject" class="inputl"> 
<label for="message" class="title"> 内 容 : </label> 
<textarea name="message" cols="39" rows="$S" class="inputl" ></textarea> 


| </fieldset> 
EE | </form> 
第 2 步 ， 在 <head> 标 签 内 插入 <style> 标 签 ， 定 义 内 部 样式 表 。 
和 第 3 步 ， 定 义 CSS 样式 控制 表单 的 显示 ， 同 时 定义 两 个 类 ， 以 供 JavaScript 属性 事件 调用 。 
body {/* 统 一 网 页 字体 大 小 */ 
font-size:12px: 此 字体 大 小 12px*/ 
} 
.title {/* 提 示 文 本 样式 类 */ 
width:100px: 诺 固 定 宽度 */ 
float:left: 诺 同 左 浮动 定位 */ 
text-align:right: 谍 文 本 右 对 齐 */ 
font-weight:bold: 上 # 字 体 加 粗 #/ 
margin:6px 0: 谍 定 义 提示 文本 的 外 边 距 */ 


} 

input, textarea {/* 表 单 对 象 默认 显示 样式 */ 
background-color: #EEEEEE: 
border-bottom: #FFFFFF 1px solid; 
border-left: #CCCCCC 1px solid; 
border-right: #FFFFFF 1px solld: 
border-top: #CCCCCC 1px solid; 


} 

input:focus, textarea:focus {/* 表 单 获 取 焦 点 时 的 样式 */ 
backeround-color:#FOF8FF: 
border: 1px solid #999; 

} 
站 儿 ”8.2.7 ”设计 图 标 表单 
本 例 介 绍 如 何 把 一 个 外 部 图 标 固 定 在 文本 框 的 左 侧 ， 既 能 点 级 表单 ， 又 能 够 提示 用 户 输入 ， 演 示 
”效果 如 图 8.14 所 示 。 
CE EE rtp://localhostim 只 ~ BO - 1 
图 8.14 图 标 样式 的 表单 效果 
【操作 步骤 】 


第 1 步 ,， 新 建文 档 , 在 <body> 标 签 中 输入 下 面 代 码 ， 构 建 一 个 表单 结构 。 该 结构 依然 保留 前 面 示 
” 例 的 结构 雏形 ， 并 适当 进行 增删 。 
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<div 1d="login"> 
<fieldset> 
<legend> 用 户 登 录 </legend> 
<form action="" method="POST" class="form"> 
<label for="name"> 姓 名 </label> 
<div><input name="name" ="text" 1d="name" value="" /></div> 
<]label for="password"> 密 人 码 </label> 
<div><nput name="password" type="text" 1d="password" value="" /></div> 
<div class="button div"><input type="i1mage" src="1mages/login.gif" /></div> 
</form> 
</fieldset> 
</div> 


第 2 步 ， 在 <head> 标 签 内 插入 <style> 标 签 ， 定 义 内 部 样式 表 。 
第 3 步 ， 输 入 下 面 样式 代码 ， 使 用 CSS 对 这 个 表单 进行 布局 。 


* {应 清 除 所 有 元 素 的 边 距 */ 
margin:0; 诬 清 除 内 边 距 */ 
padding:0; 谍 清 除外 边 距 */ 

} 

body {/* 定 义 网 页 基本 属性 */ 
text-align:center; 诬 网 页 居中 显示 */ 

} 

胡 ogin {/* 表 单 包 含 框 样式 */ 
margin: 10px auto 10px: 诬 网 页 居中 显示 */ 
text-align:left: /# 文 本 左 对 齐 #/ 

} 

fieldset {/* 表 单 域 样式 */ 
width:230px: 谍 固 定 表单 的 宽度 */ 
margin:20px auto; 诺 定 义 表单 的 外 边 距 */ 
font-size:12px;: 谍 统 一 表单 的 字体 大 小 */ 


第 4 步 ， 需 要 让 表单 对 象 的 提示 文本 与 表单 对 象 上 下 排列 显示 ， 故 定义 标签 元 素 为 块 状元 素 , 并 | 


定义 它们 的 宽度 为 固定 显示 。 详 细 代码 如 下 : 
label {/* 定 义 标签 提示 文本 的 样式 */ 


width:200px: 诺 固 定 宽度 */ 
height:26px: 上 * 固 定 高 度 */ 
line-height:26px:; 此 固定 行 高 */ 
text-indent:6px: /文本 首 行 缩 进 6px*/ 
display:block: 人/# 块 状 显示 
font-weight:bold: 谍 加 粗 提示 文本 */ 


} 
第 5 步 ， 定 义 表单 对 象 的 样式 。 先 利用 分 组 统一 所 有 表单 对 象 的 样式 ， 然 后 利用 插入 背景 图 像 的 


万 法 早 独 为 每 个 文本 框 左 侧 定义 一 个 图 标 。 为 了 避免 文本 框 内 的 文本 遮 冀 背景 图 像 图 标 ,需要 定义 左 


侧 内 边 距 以 挤 出 一 个 空间 给 背景 图 像 贸 用。 详细 代码 如 下 : 
#name, #password {/* 统 一 表单 对 象 的 样式 */ 


border: 1px solid #ccc:; 记 定 义 表单 对 象 的 边框 样式 */ 
width:160px: 诺 固 定 宽度 */ 


sw 


,1d="url" /></div> 
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height:22px: 诺 固 定 高 度 */ 

margin-left:6px: 诺 定 义 左 侧 外 边 距 */ 

padding-left:20px: 诺 定 义 左 侧 内 边 距 ， 挤 出 定义 背景 图 像 的 空间 */ 
line-height:20px: 诺 定 义 行 高 */ 


} 
#name {/* 用 户 名 文本 框图 标 样 式 */ 
backeground:url(images/name.gif) no-repeat 2px 2px: 访 定 义 用 户 名 文本 框图 标 */ 
} 
#password {l# 用 户 密码 文本 框图 标 样 式 状 
background:url(images/password.gif) no-repeat 2px 2px; ”定义 密码 文本 框图 标 */ 


} 
.button div {/* 按 钮 样式 */ 


text-align:center; 诺 按 钮 文本 居中 */ 
margin:6px auto: 诺 按 钮 居中 显示 */ 


8.2.8 设计 反馈 表 


本 例 设 计 一 个 简单 的 反馈 表 ， 主 要 使 用 表单 域 <fieldsef> 标 签 、 表 音域 标 题 <legend> 标 和 位 、 文 件 上 


，” 传 控件 input (type="file") 和 文本 域 <textarea> 标 签 。 表 单 域 <fieldset> 标 签 主要 是 将 表单 分 成 多 个 小 区 
” 域 显示 在 网 页 中 ; 表单 域 标题 legend> 标 签 则 是 针对 每 个 不 同 的 表单 域 设 置 标题 ， 文件 上 传 控 件 input 


(type="file"〉 结合 后 台 开 发 程序 或 者 JavaScript 实现 文件 上 传 功能 ， 文 本 域 <textarea> 标 签 是 可 以 输 


”入 多 行文 本 的 元 素 控件 。 


【操作 步骤 】 
第 1 步 ， 新 建文 档 ， 设 计 表单 结构 ， 代 人 码 如 下 所 示 ， 在 浏 贤 器 中 显示 效果 如 图 8.15 所 示 。 


<div class="feedback"> 
<h3> 反 馈 表 单 </h3> 
<div class="content"> 
<form method="post" action=""> 
<fieldset class="base 1nfo"> 
<legend> 用 户 信 息 </legend> 
<div class="frm cont userName"><label for="userName"> 用 户 名 : </label><input type="text" 


value="" id="userName" /></div> 


<div class="frm_ cont email"><label for="email"> 电 子 邮 件 : </label><input type="text" value="@" 


id="email" /></div> 


<div class="frm cont url"><label for="url"> 网 址 : </label><input type="text" value="http:/M" 


</fieldset> 
<fieldset class="feedback content"> 
<legend> 反 馈 内 容 </legend> 
<div class="frm cont up file"> 
<label for="up_file"> 相 关 图 片 : </label><input type="file" 1d="up_file" /> 
<p class="tips"> 本 系统 只 文 持 上 传 .jpg、.gf、.png 图 片 。</p> 
</div> 
<div class="frm cont msg'"> 
<]label for="msg"> 内 容 : </label><textarea rows="4" cols="40" i1d="msg"></textarea> 
<p class="tips"> 请 输入 留言 内 容 ! </p> 
</div> 
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</fieldset> | 
<div class="btns"><button type="submit"> 提 交 </button><button type="reset"> 香 置 </button></div> 
</form> | 
</div> | 
攻 
第 2 步 ， 使 用 CSS 样式 定义 HTML 标签 的 表现 ， 基 本 原则 是 从 外 到 内 ， 从 泛 到 细 ， 更 重要 的 是 | 
要 善于 利用 CSS 选择 器 。 


-feedback {l#* 定 义 表单 整体 的 宽度 和 边框 样式 等 交 
WwWldth:398Ppx: 
padding:1px:; 

border: 1px solld #E8E8E8; | 

background-color:#FFFFFF: | 

| 


} 

.feedback * {/* 定 义 表单 内 部 的 所 有 元 素 内 补丁 、 外 补丁 以 及 文字 的 相关 样式 */ 
margin:0; | 
padding:0: | 
font:normal 12px/1.5em "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif: 


le SE htip://localhostimyste/testhtm|l Dv localhost x | 


图 8.15 默认 解析 表单 效果 ] 


第 3 步 ， 整 体 样式 的 定义 主要 包含 反馈 表 单 的 整体 宽度 和 内 部 所 有 子 元 素 的 整体 定义 。 整 体 宽度 、 
边框 等 样式 的 定义 是 根据 视觉 效果 而 设 定 ; 定义 内 部 所 有 子 元 素 的 样式 是 为 了 提高 后 期 对 子 元 素 样式 ， 
定义 的 便利 性 。 


feedback h3 {/* 定 义 表单 标题 的 高 度 、 文 字样 式 以 及 背景 颜色 等 */ 
height:24px:; | 
line-height:24px:; 
font-weight:bold: | 
font-size: 1 3px; | 
text-Iimdent: 12px; 
color:#FFFFFF: 
background-color:#999999; 


和 
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第 4 步 ， 定 义 反馈 表单 标题 的 高 度 ， 并 设置 标题 文本 缩 进 以 及 文字 大 小 等 样式 , 增强 标题 与 内 容 
之 间 的 反差 和 整齐 感 。 


.feedback .content {/# 表 单 内 容 区 域 增加 10px 的 左 、 右 内 补丁 ， 使 其 与 表单 外 框 产生 间距 */ 
padding:0 10px: 


第 5 步 , 为 了 不 让 反馈 表单 内 部 信息 与 边框 太 紧 密 ， 将 表单 内 容 区 域 增加 10px 的 左 、 右 内 补丁 ， 
使 其 与 表单 整体 有 一 定 的 间距 。 
-feedback fieldset {/* 定 义 表 单 域 边框 样式 以 及 与 上 下 几 个 元 素 之 间 的 间距 */ 
padding-left:12px; /* 因 为 前 和 面 已 经 将 表单 内 部 所 有 内 补丁 设置 为 0, 所 以 增加 12px 的 左 内 补丁 使 表单 域 
标题 缩 进 */ 


margin-top: 10px:; 
border:0 none: 上 话 去 除 默 认 的 表单 域 边框 */ 
border-top: 1px solid #999999;: 诺 定 义 表单 域 上 边框 的 样式 */ 
} 
.feedback legend { 
padding:0 Spx: 谍 设 置 表 单 域 的 标题 在 表单 域 上 边框 中 的 间距 */ 


color:#333333; /* 考 虑 正 浏览 器 解析 表单 域 标题 时 文字 颜色 与 Firefox 浏览 器 不 同 ， 所 以 统一 定义 相同 

的 颜色 值 */ 

} 

表单 域 在 浏览 器 默认 解析 的 情况 下 是 有 边框 线 的 , 不 需要 边框 线 就 需要 将 其 隐藏 ， 需要 部 分 边框 
线 就 要 将 不 需要 的 部 分 隐藏 。 只 需要 一 条 上 边框 线 ， 因 此 首先 将 所 有 边框 消除 (border:0 none;)， 然 
后 再 次 定义 上 边框 的 样式 。 

第 6 步 ， 在 定义 整体 样式 时 ， 将 所 有 内 补丁 (padding) 定义 为 0， 导致 表 单 域 标 题 <legend> 标 签 
中 的 文字 紧 挨 表单 域 边 杠 。 需 要 将 其 缩 进 ， 就 要 将 左 内 补丁 值 增加 ， 如 “padding-left:12px:;” 即 可 将 
表单 域 标 题 缩 进 ， 如 图 8.16 所 示 。 


.feedback .frm cont { 
margin-top:8px; /* 表 单 内 容 区 域 中 不 同 表单 之 间 的 上 下 间距 */ 


} 
< 用 P 人 得 
i: 站 表单 域 缩 进 
有 : http:/ 与 否 导致 的 
RS 到 表单 域 标题 


十 位 置 的 差别 


本 系统 只 支持 上 传 . jpE、. 6i 


请 输入 鲤 言 内 容 ， 


图 8.16 ”表单 域 缩 进 后 对 表单 域 标 题 的 影响 对 比 
第 7 步 ， 将 每 个 表单 的 内 容 增加 外 补丁 ， 增 加 每 个 表单 元 素 之 间 的 空间 感 。 
.feedback label {/* 定 义 label 标签 的 宽度 、 右 对 齐 ， 设 置 浮动 ， 使 其 与 输入 框 并 列 */ 


“hn 
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float:left: 
width:80px:; 
height:22px; 
line-height:24px; 
text-align:right: 
color:#ABABAB: 
cursor:pointer:; 


} 


第 8 步 ，<label> 标 签 使 用 浮动 后 可 以 将 劳 边 的 元 素 〈 即 文本 输入 框 )“ 吸 ”到 它 的 劳 边 ， 并 设置 ， 


了 宽度 和 高 度 属性 ， 再 将 文字 右 对 齐 。 这 样 的 排列 在 视觉 效果 上 可 以 达到 整齐 的 感觉 ,不 会 让 浏览 者 
感觉 这 个 表单 是 杂乱 无 章 的 。 
feedback .base_ info input {/* 定 义 表单 内 容 区 域 中 所 有 输入 框 的 宽度 和 高 度 等 样式 */ 
width: 100px:; 
height: 17px:; 
padding:3px 2px 0; 
border: 1px solid #DEDEDE:; 


} 
feedback .email input {/* 针 对 Email 地 址 输入 杠 ， 改 变 其 宽度 属性 值 */ 
width: 150px:; 


} 
.feedback .url input {/* 针 对 网 址 输入 框 ， 改 变 其 宽度 属性 值 */ 
width:240px; 


} 
虑 避免 因 输 入 框 的 高 度 和 宽度 修改 导致 浏览 器 之 间 的 差别 ， 使 用 auto 默认 值 恢复 浏览 器 默认 解析 */ 
.feedback .up file input { 
width:auto: 
height:auto: 
} 


.feedback .base info input 选择 器 为 反馈 表单 中 类 名 为 base_info 的 容器 内 所 有 的 <inpu 亿 标签 设置 ~ 
了 宽度 、 高 度 和 边框 样式 ， 再 针对 不 同 功能 的 输入 框 设置 宽度 ， 不 仅 能 加 大 显示 输入 数据 的 空间 , 还 


可 以 形成 表单 之 间 有 序 的 错落 感 。 


第 9 步 ， 文 件 上 传 控 件 input (type="file") 也 是 <input> 标 签 ， 但 不 在 类 名 为 base info 的 容器 之 


内 ， 所 以 最 终 显示 的 还 是 默认 的 浏览 器 解析 效果 。 
.feedback .tips {* 将 提示 文本 利用 内 补丁 缩 进 ， 并 设置 红色 ， 突 出 显示 */ 
padding:Spx 0 0 80px: 
color:#FF3260: 


} 
.feedback textarea {/* 定 义 文 本 域 的 宽 高 以 及 内 部 文字 的 行 高 等 样式 */ 
width:240px:; 
height:66px; 
padding-left:2px:; 
line-height:22px; 
border: 1px solid #DEDEDE: 


} 
.feedback .btns {/* 按 钮 区 域 增加 上 下 内 补丁 ， 加 大 间距 ， 并 定义 其 内 部 的 元 素 大 中 显示 */ 
padding:Spx 0; 


ds 


vote 
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text-align:center; 


| .feedback .btns button {/* 定 义 按 钮 的 样式 以 及 按钮 中 文字 的 间距 等 样式 */ 
height:22px; 
margin:0 Spx; 
letter-spacing:3px: /# 调 整 文字 间距 天 
Note padding-left:3px: 记 添 加 左 内 补丁 使 按钮 左右 间距 相等 */ 


cursor:pointer; 


} 


| 第 10 步 ， 将 文本 域 、 提 示 信 息 和 按钮 等 元 素 定 义 为 相关 样式 。 文 本 域 中 使 用 “padding-left:2px;” 
， 是 需要 使 文字 与 其 边框 产生 间距 ， 按 钮 中 定义 “letter-spacing:3px;” 可 以 让 按钮 中 的 文字 之 间 有 3px 
的 间距 ， 以 文字 的 右边 为 基准 。 

第 11 步 ， 经 过 以 上 CSS 修饰 的 HTML 结构 ， 最 终 会 在 浏览 右 中 显示 如 图 8.17 所 示 的 页 面 效果 。 
EE 3 htto://localhost/m P = 8 c 
ESTEE 


| 用 户 信息 
用 户 空 。 


电子 邮件 : @ 


| 网址 : http:// 


| 反馈 内 容 

| 相关 图 片 ， 着 
本 系统 只 支持 上 售 . jpg -gif -png 因 片 = 

内 容 : 


请 辆 入 留言 内 容 ! 


| 提交 | 重 查 


图 8.17 最 终 的 反馈 表单 效果 
和 8.2.9 设计 搜索 表单 


搜索 框 一 般 包含 关键 词 输入 框 、 搜 索 类 别 、 搜 索 提 示 和 搜索 按钮 ， 当 然 简单 的 搜索 框 只 有 关键 
， 词 输入 框 和 搜索 按钮 这 两 部 分 。 本 案例 将 介绍 如 何 设计 附带 提示 的 搜索 框 样式 ,演示 效果 如 图 8.18 


| 所 示 。 
| Se hp//ocalhom p+- acjeistses >x 状 也 
图 8.18 设计 搜索 框 
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【操作 步 又 】 
第 1 步 ， 新 建 一 个 网 页 ， 保 存 为 ndex html， 在 <body> 标 签 内 输入 如 下 结构 代码 ,构建 表单 结构 。 


<div class="search box"> 


<h3> 搜 索 框 </h3> | 会 
<div class="content"> | ~ 
<form method="post" action=""> 
ee MA [ol 


<option value="1"> 网 页 </option> 
<option value="2"> 图 片 </option> 
<option value="3"> 新 闻 </option> 
<option value="4">MP3</option> 
</select> 
<input type="text" value="css" /> <button type="submit"> 搜 索 </button> 
<div class="search tips"> 
<h4> 搜 索 提示 </h4> 
<ul> 
<]i><a hre 伍 "#">css 视频 </a><span> 共 有 589 个 项 目 </span></li> 
<]i><a hre 伍 "#">css 教程 </a><span> 共 有 58393 个 项 目 </span></li> 
<]i><a hre 伍 "#">csstdiv</a><span> 共 有 158393 个 项 目 </span></li> 
<]i><a hre 伍 "#">css 网 页 设计 </a><span> 共 有 58393 个 项 目 </span></li> 
<]i><a href="#">css 样式 </a><span> 共 有 158393 个 项 目 </span></li> 
</ul> 
</div> 
</form> 
</div> 
</div> | 
整个 表单 结构 分 为 两 个 部 分 , 将 下 拉 选 择 框 、 文 本 框 和 按钮 归 为 一 类 , 主要 功能 是 用 于 搜索 信息 ; ， 
搜索 提示 为 当 在 文本 框 中 输入 文字 时 ， 将 会 出 现 相 对 应 的 搜索 提示 信息 ,该 功能 主要 由 后 全 程序 开发 
人 员 实 现 ， 前 台 设 计 师 只 需要 将 其 以 页 面 元 素 表现 即 可 。 / 
第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 逐步 输入 | 
css 代码 ， 设 计 表单 样式。 | 
第 3 步 ， 通 过 分 析 最 终 效 果 可 以 看 到 ， 页 面 中 并 没有 显示 “站 内 搜索 ”和 “搜索 提示 ”这 两 个 标 
题 ， 且 搜索 按钮 是 以 图 片 代替 的 , 搜索 提示 出 现在 搜索 输入 框 的 底部 , 并 且 宽 度 与 输入 框 相同 。 为 此 ，， 
开始 在 内 部 样式 表 中 输入 下 面 样式 ， 对 表单 结构 进行 初始 化 设计 。 
.search_box {/* 设 置 输入 框 宽度 ， 并 设置 为 相对 定位 ， 成 为 其 子 级 元 素 的 定位 参考 */ 
position:relative; 
width:360px:; 


} 

Search box * {/* 设 置 输入 框 内 补丁 、 边 界 为 0， 列表 修饰 为 无 ， 并 且 设 置 字体 样式 等 所 
margin:0; padding:0; 
list-style:none; 
font:normal 12px/1.5em "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif: 


.search box h3, .search tips h4 {display:none;} /* 隐 藏 标题 文字 */ 


第 4 步 , 设置 搜索 框 整体 的 宽度 属性 值 以 及 其 所 有 子 元 素 的 内 补丁 、 边 界 等 相关 属性 。 为 了 方便 
将 搜索 提示 信息 框 通过 定位 的 方式 显示 在 搜索 输入 框 的 底部 ， 在 .search box 中 定义 position 属性 ， 让 Ue 
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”其 成 为 子 级 元 素 定位 的 参照 物 。 文 档 结构 中 的 标题 在 页 面 中 不 需要 显示 ， 因 此 可 以 将 其 隐藏 。 现在 只 
”是 将 标题 文字 隐藏 了 ， 后 期 网 站 开发 过 程 如 果 需 要 显示 时 ， 可 以 直接 通过 CSS 样式 修改 ， 而 不 需要 
”再 次 调整 文档 结构 。 


.Search_box select {/* 将 下 拉 框 设置 为 浮动 ， 并 设置 其 宽度 值 */ 
float:left: 
width:60px:; 


.search_box input {/* 设 置 搜索 输入 框 样式 ， 浮 动 显 示 ， 添 加 左右 两 边 间距 (边界 〉*/ 
float:left: 
width: 196px; height: 1 4px:; 
padding: 1px 2px: margin:0 Spx:; 
border: 1px solid #619FCF: 


} 
.Search box button {/*# 设 置 按钮 浮动 ， 以 缩 进 方式 隐藏 按钮 文字 ， 添 加 背景 图 所 
float:left: 
WwWldth:S$9px: height: ] 8px; 
text-indent:-9999px; 
border:0 none; 
background:url(1mages/btn search.agif) no-repeat 0 0; 
cursor:pointer:; 


} 
第 5 步 , 搜索 类 别 下 拉 框 、 搜 索 关 键 字 输入 框 和 搜索 按钮 这 3 个 元 素 按 照 第 理 来 理解 原本 就 是 可 


以 并 列 显示 的 ， 但 为 了 将 这 3 个 元 素 之 间 的 默认 空间 缩短 ， 使 用 了 “float:left ”， 再 利用 输入 框 input 
增加 可 控 的 边界 “margin:0 5px;” 调 整 三 者 之 间 的 间距 。 


三 者 之 间 整 体 样式 调整 完毕 后 ,， 再 对 其 细节 部 分 进行 详细 的 调整 修饰 。 美化 输入 框 并 且 利 用 文字 


缩 进 属 性 隐藏 按钮 上 的 文字 ， 使 用 图 片 代替 。 


第 6 步 ， 下 拉 框 <select> 标 签 只 是 设置 了 宽度 属性 值 ， 并 未 设置 其 高 度 属性 值 ， 其 中 的 原因 就 是 


”下 浏 览 器 和 Firefox 浏览 器 对 其 高 度 属性 值 的 解析 完全 不 一 样 ， 因 此 采用 默认 的 方式 而 不 是 再 次 利用 
CSS 样式 定义 其 相关 属性 。 


第 7 步 ， 按 钮 <button> 标 签 在 默认 情况 下 不 具备 当 鼠 标 悬 停 时 显示 手 形 指针 ， 因 此 需要 特殊 定义 。 
.search_tips {/* 将 搜索 提示 框 设 置 的 宽度 与 输入 框 相等 ， 并 绝对 定位 在 输入 框 底部 */ 


position:absolute:; 
top:17px: left:6Spx:; 
width: 190px; padding:Spx Spx 0; 
border: 1px solid #619FCF:; 
} 


第 8 步 , 搜索 提示 框 使 用 绝对 定位 的 方式 显示 在 输入 框 的 底部 ， 其 宽度 属性 值 等 于 输入 框 的 宽度 


”属性 值 , 使 页 面 更 加 美观 。 不 设置 提示 框 的 高 度 属 性 值 是 希望 搜索 框 能 随 着 内 容 的 增加 而 目 适 应 高 度 。 


.search tips i {/* 设 置 搜索 提示 框 内 的 列表 宽度 和 高 度 值 ， 利 用 浮动 避免 正 浏览 器 中 列表 上 下 间距 增多 的 


BUG*/ 
float:left: 
width: 100%: 
height:22px; 
line-height:22px; 
} 
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第 9 步 ， 在 正 早期 版 本 浏览 器 中 ， 列 表 <li> 标 签 上 下 间距 会 增 大 显示 ， 为 了 避免 该 问题 的 出 现 ，， 


第 10 步 ， 将 列表 项 <li> 标 签 中 的 锚 点 <a> 标 答 和 <span> 标 俭 分 别 左右 浮动 ， 使 它们 靠 两 边 显 示 在 
搜索 提示 框 内 ， 并 相应 地 添加 文字 样式 做 细节 调整 。 


为 所 有 列表 <li> 标 签 添加 浮动 float 属性 。 宽 度 属 性 值 设 置 为 100% 可 以 避免 当 列 表 <li> 标 答 具 有 浮动 | 
属性 时 ， 宽 度 自 适应 的 问题 。 

.search tips lia {/* 搜 索 提示 中 相关 文字 居 左 显示 ， 并 设置 相关 样式 */ Ef 
float:left: Wik 
text-decoration:none: Note | Ote 
color:#333333; | 

) 

.search_tips li a:hover {/*# 搜 索 提 示 中 相关 文字 在 鼠标 县 停 时 显示 红色 文字 类 
color:#FF0000: | 

} | 

.search tips li span {/* 以 灰色 弱化 搜索 提示 相关 数据 ， 并 居 右 显示 */ ] 
float:right: | 
color:#CCCCCC: 

} | 


83 在 线 练 习 | 


本 节 通 过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HIMLS 设计 表单 结构 和 样式 。 感 兴趣 的 读者 可 
以 扫 码 练习 : (1) 表单 行为 ; (2) 表单 美化 。 
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CSS 盒 模 型 


1996 年 W3C 推出 CSS， 并 规定 了 页 面 中 所 有 元 素 基 本 显示 形态 为 方形 的 盒子 (Box )， 
并 由 此 形成 了 一 套 严 说 的 盒子 模型 (Box Model )。 根 据 这 个 盒 模型 规则 ， 网 页 中 所 有 元 素 对 
象 都 被 放 在 一 个 盒子 里 ， 设 计 师 可 以 通过 CSS 来 控制 这 个 盒子 的 显示 属性 ， 这 就 是 经 典 的 
CSS 盒 模型 。 盒 模型 是 CSS 基础 ， 它 规定 了 网 页 元 素 显 示 方 式 ， 以 及 如 何 控 制 元 素 间 的 位 
置 关 系 ， 本章 将 围绕 盒 模 型 的 缘起 、 概 念 、 结 构 、 尺 寸 等 基础 知识 展开 讲解 ， 为 学 习 和 使 用 


CSS 进行 网 页 设计 商定 扎实 的 基础 。 


【 学 习 重 点 】 

中 了 解 CSSS2 盒 模型 。 
WI 设计 边框 样式 。 

P| 设计 边界 样式 。 

BI 设计 补 白 样式 。 
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9.1 盒 模型 基础 


CSS 定义 所 有 的 元 素 都 可 以 拥有 像 盒子 一 样 的 外 形 和 平面 空间 , 它 包 含 边 界 、 边 框 、 补 白 、 内 容 ， 
内 容 又 包括 填充 对 象 和 背景 (背景 色 和 背景 图 像 )。 盒 模型 规范 了 网 页 元 素 的 显示 基础 ， 关 系 到 网 页 
设计 中 排版 、 布 局 、 定 位 等 操作 ， 所 有 元 素 都 必须 遵循 盒 模型 规则 。 


9.1.1 盒 模 型 概述 


传统 网 页 设计 是 以 表格 为 基础 的 , 所 有 网 页 元 素 都 依靠 表格 来 确定 自己 的 外 框 和 位 置 。 但 表格 布 
局 也 给 网 页 带 来 很 多 问题 。 例 如 ， 在 表格 页 面 中 ， 为 了 给 一 段 文本 加 上 一 个 彩色 的 边框 ， 需 要 添加 一 
个 表格 ,然后 为 表格 定义 边框 ,通过 这 种 间接 的 方式 为 文本 增加 一 个 边框 。 现 在 想 一 想 ， 这 似乎 有 点 
不 可 思议 , 但 传统 布局 中 这 种 应 用 确实 很 普遍 ， 因 此 一 个 网 页 中 可 能 需要 添加 很 多 个 类 似 的 无 意义 的 
表格 。 
CSS 完全 抛弃 了 表格 的 束缚 ， 明 确 规定 了 网 页 中 所 有 元 素 都 可 以 定义 自己 的 模型 。 除 了 边框 外 ， 
在 元 素 内 容 四 周 还 可 以 定义 一 个 空白 区 域 以 控制 元 素 边框 与 元 素 内 容 之 间 的 位 置 关 系 , 以 及 在 边框 外 
边 定义 一 个 空白 区 域 以 控制 元 素 与 其 他 元 素 的 距离 。 
元 素 内 容 与 边框 之 间 的 空白 区 域 ， 被 称 作 元 素 的 补 白 padding)， 有 人 也 称 之 为 元 素 的 内 边 距 、 
填充 或 内 框 ; 元 素 边 框 外 边 的 空白 区 域 ， 被 称 作 边界 Cmargin)， 有 人 也 称 之 为 元 素 的 外 边 距 或 外 框 。 
由 于 每 个 元 素 都 可 以 拥有 自己 的 模型 ， 它 看 起 来 像 一 个 矩形 的 盒子 ， 于 是 有 人 就 把 CSS 的 这 种 
规则 统称 为 盒 模型 。 
盒 模型 概念 的 提出 ， 使 网 页 布局 完全 摆脱 了 表格 的 束缚 ， 任 何 元 素 对 象 ， 无 论 是 传统 的 段落 、 列 
表 、 标 题 、 图 片 ， 还 是 标准 布局 中 的 div 和 span 元 素 ， 都 可 以 通过 上 自己 的 属性 来 实现 布局 ， 设 置 模型 
显示 效果 。 
CSS3 规范 新 增加 了 UI 模块 (User-interface 样式 模块 )， 该 模块 用 来 控制 与 用 户 界 面相 关 效 果 的 
呈现 方式 ， 详 细 资 料 请 参阅 http:/www.w3.org/TR/css3-ui/。 该 模块 改善 了 传统 盒 模型 结构 ， 增 强 了 盒 
子 构成 要 素 的 功能 ， 扩 展 了 盒 模型 显示 的 方式 ， 具 体 描述 如 下 。 
改善 结构 : 除了 传统 的 内 容 区 、 边 框 区 、 补 白 区 和 边界 区 外 ， 为 盒子 新 增 轮 廓 区 。 
增强 功能 : 内 容 区 增强 CSS 自动 添加 内 容 功 能 ， 增 强 内 容 淤 出、 换行 处 理 ， 此 部 分 知识 可 
参阅 第 4 章 内 容 ; 允许 多 重 定 义 背 景 图 、 控 制 背 景 图 显示 方式 等 ， 此 部 分 知识 可 参阅 第 5 章 
内 容 ; 增加 背景 图 边框 、 多 重 边框 、 圆 角 边 框 等 功能 ， 此 部 分 知识 可 参阅 第 12 章 内 容 ; 完 
善 “margin:auto;” 布 局 特性 ， 此 部 分 知识 可 参阅 第 11 章 内 容 。 

扩展 显示 : 完善 传统 的 块 显 示 特 性 ， 增 加 弹性 、 伸 缩 盒 显 示 功 能 ， 丰 富 网 页 布局 手段 ， 此 部 
分 知识 可 参阅 第 11 章 内 容 。 


9.1.2 使 模 型 结构 


在 网 页 设计 中 ， 经 常会 听 到 内 容 (content)、 补 白 (padding)、 边 框 (border)、 边 界 (margin)， 
CSS 盒 模 式 都 具备 这 些 属 性 。 用 户 可 以 把 盒 模式 转移 到 日 常生 活 中 的 盒子 〈 箱 子 ) 上 来 理解 ， 日 常生 
活 中 所 见 的 盒子 也 就 是 能 装 东 西 的 一 种 箱子 ， 也 具有 这 些 属 性 ， 所 以 叫 盒子 模型 。 盒 模型 具有 如 下 特 
点 ， 结 构 示 意 如 图 9.1 所 示 。 


过 


Note 


Csss 网 页 设计 从 入 门 到 精通 ( 微 神 精 编 版 ) 


回 ”每 个 盒子 都 有 边界 、 边 框 、 补 白 、 内 容 4 个 属性 。 
每 个 属性 都 包括 4 个 部 分 : 上 、 右 、 下 、 左 。 
每 个 属性 可 同时 设置 ， 也 可 分 别 设置 。 
贸 ”边界 和 补 白 只 能 够 定义 大 小 ， 而 边框 可 以 定义 样式 、 大 小 和 颜色 。 
内 容 可 以 定义 宽度 和 高 度 。 
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图 9.1 盒 模型 结构 示例 图 


【示例 】CSS 盒 模型 是 网 页 设计 的 基础 ， 下 面 示 例 在 文档 中 插入 一 个 div 元 素 ， 它 遵循 盒 模型 规 

， 则 ， 定 义 div 元 素 的 margin、background-color、background-image、padding、border 属性 和 文本 显示 

内容。 在 Dreamweaver 编辑 窗口 中 选中 后 的 预览 效果 如 图 9.2 所 示 ， 可 以 看 到 Dreamweaver 能 够 可 视 
化 模拟 出 盒 模型 结构 ， 用 户 能 够 很 清楚 地 看 出 盒 模型 中 各 个 属性 的 效果 。 


<style type="text/css"> 


#box { 
height:400px:; 诺 定 义 元 素 的 高 */ 
width:400px: 诺 定 义 元 素 的 宽 */ 
margin:60px: /# 定 义 元 素 的 边界 #/ 
padding:60px: 谨 定 义 元 素 的 补 白 */ 
border:solid 60px #aaa: 诺 定 义 元 素 的 边框 */ 
background-image:url(images/box]1 .jpe):; /# 定 义 元 素 的 背景 图 像 和 
background-repeat:no-Tepeat': 
background-color:#CC99CC: 旋 定 义 元 素 的 背景 颜色 */ 

} 

</style> 


<div id="box'"> 盒 模型 结构 示意 图 </div> 

CSS 规定 页 面 中 所 有 元 素 都 包括 4 个 区 域 : 内 容 区 、 补 白 区 、 边 框 区 和 边界 区 。 利 用 CSS 属性 ， 

可 以 给 元 素 的 4 个 区 域 设置 大 小 ,在 默认 状态 下 ,所 有 元 素 盒 模型 的 初始 状态 :margin、border、padding、 
width 和 height 都 显示 为 0， 背景 为 透明 。 当 元 素 包 含 内 容 后 ，width 和 height 会 自动 调整 为 内 容 的 宽 


| 度 和 高 度 ， 而 当 元 素 浮动 时 ， 情 况 就 非常 复杂 。 
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图 9.2 盒 模 型 结构 


在 CSS 中 ， 可 以 增加 补 白 、 边 框 和 边界 的 区 域 大 小 ， 这 些 不 会 影响 内 容 区 域 ( 宽 和 高 )， 但 会 增 
加 元 素 框 的 总 尺寸 。 


9.1.3 ”定义 盒 模型 大 小 


国人 

CSS 盒子 模型 使 用 width 〈 宽 ) 和 height (高 ) 定义 内 容 区 域 的 大 小 ， 但 是 很 多 用 户 误 以 为 width | 视频 讲解 
属性 表示 整个 元 素 的 宽度 ，height 属性 表示 整个 元 素 的 高 度 ， 包 括 正 老 版 本 的 浏览 占 都 这 样 认为 。 
【示例 1】 下 面 示例 定义 两 个 并 列 显示 的 div 元 素 ， 设 置 每 个 div 的 width 为 50%， 显 示 效 果 如 
图 9.3 所 示 。 | 


<style type="text/css"> 
div {l* 定 义 div 元 素 公共 属性 */ | 
float: left: /*# 疝 左 浮动 ， 实 现 并 列 显示 所 
background-image: url(images/].jpe); /# 定 义 背景 图 像 娄 | 
background-color: #CC99CC: 启 定 义 背 景色 */ 
font-size: 32px; /# 定 义 div 内 显示 的 字体 大 小 */ 
color: #FfF0000: /# 定 义 div 内 显示 的 字体 颜色 */ 
text-align: center: 诺 定 义 div 内 显示 的 字体 居中 显示 */ 
height: 540px: 诺 定 义 高 度 */ 
) 
#boxl {/* 定 义 第 1 个 div 元 素 属性 */ | 
width: 50%; /# 占 据 窗口 一 半 的 宽度 所 
} 
#box2 {/* 定 义 第 2 个 div 元 素 属性 */ 
width: 50%; 诺 占 据 窗口 一 半 的 宽度 */ 
} 
</style> 
<div id="box1"> 左 边 元 素 </div> 


i 汪 


CE 
右边 元 素 


图 9.3 定义 元 素 的 大 小 


【示例 2】 下 面 示例 以 示例 1 为 基础 ， 设 计 两 个 div 元 素 并 列 显示 ， 同 时 设置 元 素 间 留 出 一 点 空 
” 隙 ， 以 便 区 分 不 同 元 素 。 
<style type="text/css"> 
div {l* 定 义 div 元 素 公 共 属 性 ， 具 体 声明 与 示例 1 代码 相同 ， 就 不 再 重复 注释 */ 
| float:left: 
background-1mage:url(1mages/]1.jpe): 
background-color:#CC99CC:; 
| font-size:32px; 
color:#FF0O000: 
text-align:center; 
height:540px:} 
#boxl {/* 定 义 第 1 个 div 元 素 属性 */ 
width:S0%; 
] margin-right:1px; /# 定 义 右 边界 为 1px 宽 */ 


} 
#box2 {/* 定 义 第 2 个 div 元 素 属性 */ 
width:50%: 
margin-left:1px; /* 定 义 左边 界 为 1px 宽 */ 
| Eo 
</style> 
<div id="box1"> 左 边 元 素 </div> 
<div id="box2"> 右 边 元 素 </div> 
| 在 浏览 器 中 预先 ， 可 以 发 现 第 2 个 div 元 素 错 行 显示 ， 如 图 9.4 所 示 。 这 是 因为 当 左右 两 个 div 
的 width 属性 都 设置 为 50% 时 ，div 内 容 本 身 就 会 挤 满 浏览 器 窗口 ， 由 于 margin 属性 不 包含 在 width 
属性 之 内 ， 所 以 两 个 div 就 无 法 同时 显示 在 一 行内 。 
] 解决 方法 : 可 以 设置 width 属性 为 49% 或 更 小 。 但 是 当 衬 际 设 置 较 大 时 ， 通 过 缩减 百分比 还 是 存 
在 一 定 的 风险 或 局 限 性 。 此 时 ， 最 好 的 解决 办 法 是 设置 width 为 固定 值 ， 不 过 这 样 会 使 页 面 布局 失去 
灵活 性 。 


pn 
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图 9.4 错 行 显示 效果 


【拓展 】 

用 户 可 以 使 用 3 种 方法 实现 在 块 元 素 周 围 生 成 空 际 。 第 1 种 是 只 为 元 素 添 加 补 日 ， 第 2 种 是 只 添 
加 边界 ， 第 3 种 是 既 增 加 补 白 ， 又 增加 边界 。 

如 果 元 素 定 义 了 背景 , 就 不 能 使 用 补 日 设计 间距 , 因为 背景 会 扩展 到 补 白 区 域内 , 从 而 遮 新 空 际 ， 
使 其 无 法 显示 。 

根据 CSS 盒 模型 规则 ， 可 以 给 出 一 个 简单 的 盒 模型 矿 寸 计算 公式 : 

元 素 的 总 宽度 = 左边 界 + 左边 框 + 左 补 白 + 宽 + 右 补 白 + 右边 框 + 右边 界 

元 素 的 总 高 度 = 上 边界 + 上 边框 + 上 补 白 + 高 + 下 补 白 + 下 边框 + 下 边界 

例如 ， 假 设 一 个 元 素 的 宽度 为 200px， 左 右边 界 为 50px， 左 右 补 白 为 50px， 边 框 为 20px。 则 该 
元 素 在 页面 中 实际 占据 宽度 为 : 

SO0pXx + 20px + SOpX + 200pXx + SOpXx + 20px + SOpx = 440px 

但 由 于 正 早 期 版 本 (5.x 及 以 下 版 本 ) 浏览 器 对 于 盒 模型 的 解释 使 用 一 种 非 标准 规则 ， 它 认为 元 
素 的 宽度 应 为 内 容 宽 度 、 补 白 宽度 和 边界 宽度 的 总 和 ， 用 公式 表示 为 : 

width=border-left + padding-left + content-width + padding-right + border-fight 

height= border-top + padding-top + content-height + padding-bottom + border-bottom 

因此 ， 在 正 早 期 版 本 (5.x 及 以 下 版 本 ) 浏览 嚣 中， 元 素 在 页 面 中 所 占据 的 实际 大 小 为 : 

元 素 的 总 宽度 = 左边 界 + 宽 + 右边 界 

元 素 的 总 高 度 = 上 边界 + 高 + 下 边界 

因此 , 在 网 页 布局 时 ,过 到 与 宽度 或 高 度 相 关 问 题 , 设计 师 一 定 要 对 盒 模 型 中 的 margin、padding 
和 border 等 属性 进行 综合 考虑 ， 只 有 这 样 才 能 设计 出 满意 的 布局 ， 避 免 出 现 错位 、 错 行 等 现象 。 


9.2 过 框 


在 网 页 中 ， 很 多 修饰 性 线条 都 是 由 边框 定义 的 ， 边 框 可 以 作 修饰 使 用 ， 也 可 以 作为 版 块 、 对 象 分 
隔 使 用 ， 元 素 的 边框 具有 下 面 4 个 特点 : 


每 个 元 素 都 包含 4 个 方位 的 边框 ,如 border-top( 顶 边 ) 、border-right (右边 ) 、borderbottom | 


dd/ 


三 me ee epee ep ene emma nme nme ee eee ee epee epee epee es emp emma emp amp 
i 
i 
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( 底 边 ) 和 border-left (左边 ) ， 可 以 单独 定义 ， 也 可 以 使 用 border 属性 统一 定义 边框 样式 。 
独立 定义 边框 的 宽度 ， 如 border-width、 border-top-width、 border-right-width 、 border- 
bottom-width 和 border-left-width。 也 可 以 使 用 border-width 属性 统一 定义 边框 的 宽度 。 
加 ”独立 定义 边框 的 颜色 ， 如 border-color、border-top-color、border-right-color、border-bottom-color 
和 border-left-color。 也 可 以 使 用 border-color 属性 统一 定义 边框 的 颜色 。 
加 ”独立 定义 边框 的 样式 ， 如 border-style、border-top-style、border-right-style、border-bottom-style 
和 border-left-style。 也 可 以 使 用 border-style 属性 统一 定义 边框 的 样式 。 


9.2.1 定义 宽度 


定义 边框 的 宽度 有 多 种 方法 ， 简 单 说 明 如 下 。 
方法 1， 下 接 在 属性 后 面 指定 宽度 值 。 


<style type="text/css"> 


border-bottom-width: 12px: 上 诺 定 义 元 素 的 底 边 框 宽度 为 12px*/ 
border-top-width:0.2em: 诬 定 义 顶部 边框 宽度 为 元 素 内 字体 大 小 的 0.2 售 */ 
</style> 


方法 2， 使 用 关键 字 ， 如 thin、medium 和 thick。thick 比 medium 宽 ， 而 medium 比 thin 宽 。 不 
， 同 浏览 器 对 此 解析 的 宽度 值 也 不 同 ， 有 的 解析 为 Spx、3px、2px， 有 的 解析 为 3px、2px、1px。 
方法 3， 单 独 为 元 素 的 某 条 边 设置 宽度 ， 可 以 使 用 border-top-width( 顶 边框 宽度 )、border-right-width 
(右边 框 宽度 )、border-bottom-width 〈 底 边框 宽度 ) 和 border-left-width 〈 左 边框 宽度 )。 
方法 4， 使 用 border-width 属性 快速 定义 边框 宽度 ， 例 如 : 


<style type="text/css"> 


border-width:2px: /# 定 义 四 边 都 为 2px*/ 

border-width:2px 4px; /#* 定 义 上 下 边 为 2px， 左 右边 为 4px*/ 

border-width:2px 4px 6px: /# 定 义 上 边 为 2px， 左 右边 为 4px， 底 边 为 6px*/ 
border-width:2px 4px 6px 8px: 人/# 定 义 上 边 为 2px， 右 边 为 4px， 底 边 为 6px， 左 边 为 8px*/ 
</style> 


会 提示 : 当 定义 边框 宽度 时 ， 必 须要 定义 边框 的 显示 样式 。 由 于 边框 默认 样式 为 none， 即 不 显示 ， 
所 以 仅 设置 边框 的 宽度 ， 由 于 样式 不 存在 ， 边 框 宽度 也 自动 被 清除 为 0。 


深 红 9.2.2 定义 颜色 


定义 边框 颜色 可 以 使 用 颜色 名 、RGB 颜色 值 或 十 六 进 制 颜色 值 。 
【示例 】 下 面 示例 分 别 为 元 素 的 各 个 边框 定义 不 同 的 颜色 ， 演 示 效 果 如 图 9.5 所 示 。 


<style type="text/css"> 


#box {l# 定 义 边框 的 颜色 郑 
height: 164px: /# 定 义 盒 的 高 度 类 
width: 240px: /# 定 义 盒 的 宽度 科 
padding: 2px: 诺 定 义 内 补 白 */ 
font-size: 16px: /# 和 定义 字体 大 小 #/ 
color: #FF0000: /# 定 义 字 体 显 示 颜 色 头 
border-style: solid: /# 定 义 边框 为 实 线 显示 类 
border-width: SOpx: /# 定 义 边框 的 宽度 


. 224 。 
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border-top-color: #aaa: 谍 定 义 顶 边框 颜色 为 十 六 进 制 值 */ 

border-right-color: gray: 诺 定 义 右 边框 颜色 为 名 称 值 */ 

border-bottom-color: rgb(120,50,20); ”定义 底 边 框 颜色 为 RGB 值 */ 

border-left-color:auto: 此 定义 左边 框 颜色 继承 字体 颜色 */ | 
} 
</style> 对 、 
i a ptt vied a mean 


{ee— | EE http://localhost/mys 证 - 民 岂 碟 Iocalhost 


图 9.5 定义 边框 颜色 
9.2.3 定义 样式 


边框 样式 是 边框 显示 的 基础 ，CSS3 提供 了 下 面 几 种 边框 样式 。 

none: 默认 值 ， 无 边框 ， 不 受 任 何 指定 的 border-width 值 影 啊 。 

hidden: 隐藏 边框 ，IE 不 文 持 。 

dotted: 定义 边框 为 点 线 。 

dashed: 定义 边框 为 虚线 。 

solid: 定义 边框 为 实 线 。 

double: 定义 边框 为 双 线 边框 ， 两 条 线 及 其 间隔 宽度 之 和 等 于 指定 的 border-width 值 。 
groove: 根据 border-color 值 定义 3D 凹 槽 。 

ridge: 根据 border-color 值 定义 3D 凸 槽 。 

inset: 根据 border-color 值 定义 3D 凹 边 。 

outset: 根据 border-color 值 定 义 3D 同 边 。 | 
【示例 1】 下 面 示 例 使 用 边框 样式 设计 列表 框 样式 ,定义 每 个 项 目 显示 下 画 线 ， 预 览 效 果 如 图 9.6 


和 办 办 人 人 办 凶 多 的 


所 示 。 
<style type="text/css"> 
#box {/*< 定 义 信 纸 的 外 框 >*/ 


width: S00px: 

height: 400px;: 

padding: 8px 24px:; 

margin: 6px:; 

border-style: outset: /# 定 义 信 纸 边框 为 3D 凸 边 效 果 */ 
border-width: 4px: 诺 定 义 信纸 边框 宽度 */ 
border-color: #aaat: /# 定 义 信纸 边框 颜色 并 


”22D。 


font-size: 14px; 
] color: #D02090; 
| list-style-position: mside; 庶 定 义 列表 符号 在 内 部 显示 */ 


} 
#box h2 {/*< 定 义 标 题 格式 >*/ 
padding-bottom: 12px; 

Note border-bottom-style: double: 诺 定 义 标题 底 边 框 为 双 线 显示 */ 

| border-bottom-width: 6px: 刻 定 义 标 题 底 边 框 宽度 */ 

| border-bottom-color: #999: /# 定 义 标 题 底 边框 颜色 阁 / 

| text-align: center; 
color: #000000;} 

J 

padding: 6px 0; 诬 增 加 列表 项 之 间 的 间距 */ 
border-bottom-style: dotted: 诺 定 义 列表 项 底 边 框 为 点 线 显 示 */ 
border-bottom-width: 1px: 诺 定 义 列表 项 底 边 框 宽度 */ 
border-bottom-color: #66CC66: 。”/* 定 义 列表 项 底 边 框 颜 色 */ 


} 
</style> 


| 

| olid="box"> 

] <h2> 边 框 样式 应 用 </h2> 

| <li>none: 默认 值 ， 无 边框 ， 不 受 任 何 指定 的 border-width 值 影响 。</li> 
] <li>hidden: 隐藏 边框 ， 正 不 文 持 。</li> 

| <li>dotted: 定义 点 线 。</li> 

] <li>dashed: 定义 虚线 。</li> 

| <li>solid: 定义 实 线 。</li> 

<li>double: 定义 双 线 边框 ， 两 条 线 及 其 间隔 宽 等 于 指定 的 border-width 值 。</li> 
| <li>groove: 根据 border-color 值 定义 3D 四 槽 。</l> 

| <li>ridge: 根据 border-color 值 定 义 3D 凸 槽 。<i> 

<li>inset: 根据 border-color 值 定 义 3D 止 边 。</> 

| <li>outset: 根据 border-color 值 定义 3D 凸 边 。</li> 

</ol> 


http://localhos...site/test.htrml 


下 总 htto;//localhost/mysitc/tc PDP- 站 localhost @ localhost/mysite/test.html 可 CS Ee f=] 


clint 边框 样式 应 用 


-none: 蝇 认 值 ， 无 边框 ， 不 受 任 局 指定 的 borderwidth 值 景 向 。 
Re 
dashcd: 定义 虚线 。 


1 _ none : 默认 值 ,无 边框 ， 不 受 任 何 指定 的 border-width 信 影响 ， 

2. hidden : 隐 芒 边框 ，IE 不 支持 。 

3. dotted : 定义 训 线 ， 
ee 
6.double : 定义 双 晓 边框 ， 两 条 线 及 其 间隔 这 等 于 指定 的 border-width 信 。 
A 
EPE 
ERROR 
TREE 


。 double: 定义 双 续 边 柜 ， 两 条 线 及 其 间隔 宽 等 于 指定 的 borderwidtb 值 。 
| oa 
eT 
-insct; 根据 bordcr-color 值 定 关 3DI 边 。 

0 


1 
: 
4 
5. solid: 定义 实 线 。 
-~ 
8 
9 


Firefox 预览 效果 


图 9.6 边框 样式 比较 
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在 正 和 Firefox 浏览 占 中 分 别 进行 预 究 , 则 效果 存在 细 伺 区别 , 说 明 不 同 浏览 器 在 解析 相同 的 样 | 
式 代码 时 显示 效果 也 不 完全 相同 。 | 


窑 提示 : 当 同 时 定义 边框 样式 、 宽 度 和 颜色 时 ， 分 别 输入 代码 有 点 烦 融 ， 这 时 可 以 合并 样式 ， 且 属 


性 值 顺序 可 以 任意 排列 : 
/x*[ 边 框 样式 代码 简写 ]*/ 
#box { border:outset 4px #aaa; 永定 义 信纸 边框 样式 */ 


} 
#box h2 {border-bottom: 6px #999 double: 上 访 定 义 标 题 底 边 框 样式 */ 


} 
#box li {border-bottom: #66CC66 dotted 1px; ”改定 义 列 表 项 底 边 框 样式 */ 
} 


【拓展 】 

元 素 的 背景 与 边框 有 着 某 种 特殊 的 关系 。 根 据 CSS 规则 ， 元 素 的 背景 不 会 超出 边框 的 外 边缘 ， 
由 于 平时 定义 边框 宽度 多 为 1px 或 2px， 且 多 为 实 线 ， 所 以 察觉 不 到 背景 深入 到 边框 的 外 边缘 。 不 过 ， 
目前 浏览 器 对 此 解释 还 存在 争议 。 

【示例 2】 下 面 示例 为 盒子 设计 背景 图 像 , 然后 设计 边框 为 虚线 显示 , 同时 定义 边框 宽度 为 30px， 
以 方便 观看 。 


<style type="text/css"> 
#box {/* 查 看 边框 与 背景 图 像 的 关系 */ 


height: 200px: /# 定 义 盒子 的 高 度 #/ 
width: 200px: /# 定 义 盒子 的 宽度 煌 
background-image: url(images/2.jpe); /# 定 义 盒子 的 背景 图 像 #W 
border: S0px dotted red: 诺 定 义 边 框 样式 为 间隔 显示 */ 
} 
</style> 


<div 1d="box"></div> 


在 IE 怪异 模式 下 浏览 ， 则 背景 没有 伸 入 边框 区 域 ， 且 解析 dotted 样式 为 圆 形 ， 如 图 9.7 所 示 。 
在 Firefox 中 浏览 ， 则 背景 伸 入 边框 区 域 ， 且 解析 边框 虚线 样式 也 不 同 ， 如 图 9.8 所 示 。 


x 


€ 和 管 http://localhost/m: PD ~ Bo | @ localhos http://localhos.. .ite/test1.htrmnl 


和 | 团 localhost/mysite/testl.htm 


图 9.7 下 解析 边框 虚线 图 98 Firefox 解析 边框 虚线 


AAA 人 
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”次 提示 : 在 默认 状态 下 ， 边 框 的 宽度 为 medium ( 中 型 ) ， 这 是 一 个 相对 宽度 ， 一 般 为 2~3px。 边 


框 默认 样式 为 none， 即 隐藏 边框 显示 。 边 框 默认 闫 色 为 前 景色 ， 即 元 素 中 包含 文本 的 左 
色 ， 如 果 没 有 文字 ， 则 将 继承 上 级 元 素 所 包含 的 文本 左 色 。 


9.2.4 案例 : 设计 行内 元 素 边 框 


根据 盒 模 型 基本 规则 ， 任 何 元 素 都 可 以 定义 边框 , 但 行内 元 素 的 边框 显示 效果 有 扣 特 殊 。 下 面 结 
， 合 示例 进行 简单 说 明 。 

| 第 一 ， 行 内 元 素 的 上 下 边框 高 度 不 会 影响 行 高 ， 而 且 不 受 段 落 和 行 高 的 约束 。 

【示例 1】 下 面 示例 在 一 段 文本 中 包含 一 个 span 元 素 , 利用 它 为 部 分 文本 定义 特殊 样式 , 设计 顶 


”部 边框 为 80px 的 红色 实 线 ， 底 部 边框 为 80px 的 绿色 实 线 ， 如 图 9.9 所 示 。 


<style type="text/css"> 


p {必定 义 段落 属性 */ 
margin: SOpx; /# 定 义 段 落 的 边界 为 50px*/ 
border: dashed lpx #999; 诺 定 义 段 落 的 边框 */ 
font-size: 14px: 放 定 义 段 落 字 体 大 小 */ 
line-height: 24px: 谍 定 义 段落 行 高 为 24px*/ 

} 

span {/* 定 义 段落 内 内 联 文 本 属性 */ 
border-top: solid red 80px; 谍 定 义 行内 元 素 的 上 边框 样式 */ 
border-bottom: solid green 80px: 诺 定 义 行内 元 素 的 下 边框 样式 */ 
color: blue: 

} 

</style> 


| <p> 寒蝉 姜 切 ， 对 长 享 晚 ， 又 雨 初 挫 。 都 门 帐 饮 无 绪 ， 留 恋 处 ， 兰 舟 催 发 。 执 手相 看 泪眼 ， 竞 无语 凝 嘻 。 
，” 念 去 去 ， 干 里 烟波 ， 暮 震 沉 沉 楚 天 阔 。 <span> 多 情 上 自古 伤 离别 ， 更 那 堪 ， 冷 落 清秋 节 ! </span> 今 宵 酒 醒 何 处 ? 
”杨柳 尾 ， 晓 风 残 月 。 此 去 经 年 ， 应 是 良 搬 好 景 虚设 。 便 纵 有 干 种 风情 ， 更 与 何人 说 ? </p> 


| htp:j/localhostymysite/testhtml 有 BCI| 愿 localhost | 


套 蝉 清 切 ， 对 长 享 晚 ， 邓 雨 订 有 相 看 泪 狠 ， 音 天 语 北 嘻 。 仿 去 去 ， 
千里 烟波 ,着 尖 况 沉 楚 天 阔 。 多 情 自古 作 离 中 ， 更 屠 暴 ， 准 洁 清 入 


图 9.9 定义 行内 元 素 上 下 边框 效果 


在 正 中 浏览 ， 可 以 看 到 上 边框 压 住 了 上 一 行文 字 ， 并 超出 了 段落 边框 ， 下 边框 压 住 了 下 一 行文 
字 ， 也 超出 了 段落 边框 。 
第 二 ， 行 内 元 素 的 左右 边框 宽度 会 挤占 左右 相 邻 文本 的 位 置 ， 而 不 是 压 住 左右 两 侧 文 本 。 左 右边 
， 框 会 跟随 文本 流 自 由 移动 ,移动 时 会 紧 跟 行内 元 素 前 后 ， 且 不 会 出 现 断 行 现象 ， 也 就 是 说 单个 边框 不 
会 被 分 开 显 示 在 两 行内 。 
| 【示例 2】 下 面 示例 在 一 段 文 本 中 包含 一 个 span 元 素 , 利用 它 为 部 分 文本 定义 特殊 样式 , 设计 左 
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侧 边 框 为 60px 的 红色 实 线 ， 右 侧 边 框 为 20px 的 蓝 色 实 线 ， 上 下 边框 为 1px 的 红色 实 线 。 在 正 中 浏 
览 ， 左 右边 框 分 别 占据 一 定 的 位 置 ， 效 泉 如 图 9.10 所 示 。 


<style type="text/css"> 


p {* 定 义 段落 属性 */ 
margin:20px; 
border:dashed lpx #999; 
font-size:14px; 
line-height:24px;} 

span {/* 定 义 段 落 内 内 联 文 本 属性 */ 
border-left:solid red 60px: 诺 定 义 行内 元 素 的 左边 框 样式 */ 
border-right:solid blue 20px: 诺 定 义 行内 元 素 的 右边 框 样式 */ 
border-top:solid red 1px: 诺 定 义 行内 元 素 的 上 边框 样式 */ 
border-bottom:solid red 1px: 访 定 义 行 内 元 素 的 下 边框 样式 */ 
color:#aaa: 诺 定 义 字 体 颜 色 */ 

} 

</style> 


<p> 寒蝉 姜 切 ， 对 长 享 晚 ， 又 雨 初 歇 。 都 门 帐 饮 无 绕 ， 留 恋 处 ， 兰 舟 催 发 。 执 手相 看 泪眼 ， 况 无语 凝 嘻 。 
念 去 去 ， 干 里 烟波 ， 暮 需 沉 沉 楚 天 阔 。 <span> 多 情 自古 伤 离别 ， 更 那 堪 ， 冷 落 清秋 节 ! </span> 今 宵 酒 醒 何 处 ? 
杨柳 证 ， 晓 风 残 月 。 此 去 经 年 ， 应 是 恨 辰 好 景 虚 设 。 便 纵 有 千 种 风情 ， 更 与 何人 说 ? </p> 


下 ol Te 0 Ee Et 三 骨 能 发 。 2 ee de 证 2 全 


行内 元 素 的 盒 模型 比较 特殊 ， 


图 9.10 定义 行内 元 素 左右 边框 效果 
它 的 形状 也 失去 了 基本 和 矩形 形状 ， 有 时 由 于 多 行 显示 会 呈现 为 非 矩 


形 形 状 ， 在 设计 中 需要 用 户 留 心 这 些 差 异 。 


93 边 多 


元 素 的 外 部 空隙 被 称 为 盒 模型 的 边界 ， 也 就 是 元 素 与 元 素 之 间 的 间距 。 边界 是 网 页 布局 中 男 一 
要 素 ， 恰 当 设置 边界 可 以 使 网 页 布局 疏 明 有 致 ， 整 体 看 起 来 优美 得 体 。 


9.3.1 定义 边 珊 


设置 边界 可 以 使 用 margin 属性 ， 例 如 : 


Imargln:2DX: 

Imargln:2pX 4pX: 
margin:2px 4px 6pX: 
margin:2px 4px 6px 8px:; 


/# 定 义 元 素 四 边 边 界 为 2px*/ 

/# 定 义 上 下 边界 为 2px， 左 右边 界 为 4px*/ 

诬 定 义 上 边界 为 2px， 左 右边 界 为 4px， 下 边界 为 6px*/ 

/# 定 义 上 边界 为 2px， 右 边界 为 4px， 下 边界 为 6px， 左 边界 为 8px*/ 


en 


Note 


Ce (sss 网页 设计 从 入 门 到 精通 〔 答 课 精 编 县 ) 


也 可 以 使 用 margin-top、margin-right、margin-bottom、margin-left 属性 独立 设置 上 、 右 、 下 和 左 


边界 的 大 小 ， 例 如 : 


margin-top:2px: /# 定 义 元 素 上 边界 为 2px*/ 
margin-Tright:2em: 人/# 定 义 右边 界 为 元 素 字 体 的 2 售 */ 
margin-bottom:2%; 人/# 定 义 下 边界 为 父 元 素 宽度 的 2%0*/ 
margin-left:auto; 诺 定 义 左边 界 为 自动 */ 


margin 可 以 使 用 任何 长 度 单位 ， 如 像素 、 磅 、 喘 寸 、 厘 米 、em、 百 分 比 等 。margin 默认 值 为 0， 


”如 果 没 有 定义 margin 的 值 ， 则 意味 着 元 素 没有 边界 。 


在 实际 使 用 中 ， 各 种 浏览 器 都 会 为 一 些 元 素 预 定义 边界 样式 ， 如 pP、hl 一 6、nul 等 ， 在 显示 时 浏 


” 览 器 也 会 自动 显示 一 定 的 边界 。 因 此 一 些 元 素 虽然 没有 定义 margin， 但 并 不 意味 它们 没有 边界 。 
1 9.3.2 案例 : 边 珊 的 应 用 


1. 网 页 居中 


auto 是 一 个 自动 计算 的 值 ， 该 值 一 般 为 0， 也 可 以 为 其 他 值 ， 这 主要 由 具体 浏览 器 来 确定 。 
【示例 1】auto 有 一 个 重要 作用 就 是 用 来 实现 元 素 居 中 显示 ， 下 面 示例 演示 了 如 何 设计 页 面 居中 


， 显示 ， 效 果 如 图 9.11 所 示 (test.html)。 


<style type="text/css"> 
body { text-align:center:; } /# 在 正 浏览 器 下 实现 居中 显示 
divi#page { 
margin: Spx auto: 放 在 非 正 浏览 器 下 实现 居中 显示 */ 
WwWldth:910px: 
helght:363pxX: 
background-1mage:url(i1images/]1.pne); 
border:solid red 1px:} 
</style> 


<div id="page"> 模 拟 页 面 </div> 


> 人 htP:Wccalhcst/nnysit=/tesihtmnl LAr-Bo ES Iocalhost 


图 9.11 居中 显示 效果 
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要 实现 CSS 平行 居中 ， 首 先 应 在 父 元 素 中 定义 “text-align:center: ”， 这 个 规则 在 下 早期 版 本 浏览 
器 中 可 以 实现 父 元 素 内 的 所 有 内 容 ， 包 括 文本 、 行 内 元 素 和 块 状元 素 居中 显示 。 但 在 其 他 浏览 器 中 只 
能 实现 文本 、 行 内 元 素 居中 显示 。 而 要 在 标准 浏览 器 中 实现 块 状元 素 居中 显示 ,解决 方法 是 为 显示 元 
素 定 义 “margin-right:auto:margin-left:auto: ”属性 。 

如 果 想 用 这 种 方法 使 整个 页 面 居 中 ， 建 议 不 要 把 所 有 模块 都 套 在 一 个 div 元 素 里 ， 可 以 根据 上 面 
示例 CSS 布局 代码 定义 ， 然 后 为 每 个 模块 的 包含 框 元 素 div 定义 “margin-right:auto;margin-left:auto;” 
就 可 以 实现 该 元 素 居 中 显示 。 

在 实际 使 用 中 ， 可 能 希望 页 面 布局 居中 显示 ,但 内 部 文本 左 对 齐 ， 这 时 就 需要 为 子 元 素 定 义 

“text-align:left;” 属 性 ,使 其 内 部 文本 同 左 对 齐 。 否则 文本 也 会 居中 显示 ， 显然 这 不 是 所 希望 的 结果 。 

2. 设计 弹性 页 面 

边界 可 以 设置 为 百分比 ， 百分比 的 取 值 是 根据 父 元 素 宽 度 来 计算 的 。 使 用 百分比 能 够 使 页 面 自 适 
应 窗口 大 小 ， 并 能 够 及 时 调整 边界 宽度 。 从 这 点 考虑 ， 选 用 百分比 具有 更 大 灵活 性 和 更 多 使 用 技巧 。 
但 是 ， 如 果 父 元 素 的 宽度 发 生变 化 ， 则 边界 宽度 也 会 随 之 变化 ， 整 个 版 面 可 能 会 混乱 ， 因 此 在 综合 布局 
时 要 慎重 选择 。 不 过 在 结构 单纯 、 内 容 单一 的 布局 中 , 适当 使 用 百分比 会 使 页 面 更 具 人 性 化 和 多 变 效果 。 

【示例 2】 下 面 示例 通过 margin 取 值 百分比 定义 弹性 布局 页 面 , 效果 如 图 9.12 所 示 (testl.html)。 


<style type="text/css"> 

#box {/* 定 义 文本 框 属性 */ 
margin:2%; 人 # 边 界 为 body 宽度 的 2%*/ 
padding:2%; 谍 补 白 为 body 宽度 的 2%*/ 
background:#CCCC33;} 

#box #content { 放 定 义 文本 框 内 文本 段 的 属性 */ 
margin:4%; 放 边 界 为 文本 框 宽度 的 4%6*/ 
line-height: 1.8em; 上 # 定 义 行 高 为 字体 高 度 的 1.8 倍 */ 
font-size: 12px: 上 雍 定 义 字 体 大 小 */ 
color:#003333; 话 定 义 字 体 颜 包 */ 

} 

#box .center {/* 居 中 加 粗 文 本 */ 
margin:4%; /边界 为 文本 框 宽度 的 4%6*/ 
text-align:center; 谍 文 本 居中 显示 */ 
font-weight:bold: 旋 定 义 标 题 为 粗 体 */ 

} 

</style> 

<div 1d="box"> 


<p class="center"> 将 进 酒 </p> 

<p class="center"> 李 和 白 </p> 

<p id="content"> 君 不 见 ， 黄 河 之 水 天 上 来 ， 奔 流 到 海 不 复 回 。<br /> 
君 不 见 ， 高 党 明镜 悲 白 发 ， 朝 如 青丝 暮 成 雪 。<br 人 
人 生得 意 须 尽 欢 ， 莫 使 金 模 空 对 月 ! <br 广 
天 生 我 材 必 有 用 ， 千 金 散 尽 还 复 来 。<br 广 
毫 羊 字 牛 且 为 乐 ， 会 须 一 饮 三 百 杯 ! <br 户 
岑 夫 子 ， 丹 丘 生 ， 将 进 酒 ， 君 葛 停 ! <br 亡 
与 君 歌 一 曲 ， 请 君 为 我 侧耳 听 ! <br /> 
钟 鼓 乌 玉 不 足 贵 ， 但 愿 长 醉 不 愿 醒 ! <br 人 
古来 圣贤 皆 息 宽 ， 惟 有 饮 者 留 其 名 ! <br 己 
陈 王 苦 时 宴 平 乐 ， 斗 酒 十 千 盗 欢 读 。<br 这 
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主人 何 为 言 少 钱 ? 径 须 沽 取 对 君 酌 。<br 这 
五 花 马 ,和 干 金 表 ， 呼 儿 将 出 换 美 酒 ， 与 尔 同 销 万 古 悉 ! </p> 
</div> 


I SS http://localhosy/mysite/testl.htm Pr BSCElocalhost x 


图 9.12 弹性 布局 效果 


在 上 面 示例 中 ， 把 所 有 边界 都 设置 为 百分比 ， 这 样 当 窗口 发 生变 化 时 ， 显 示 内 容 也 比较 得 体 地 成 
比例 变化 ， 不 至 于 当 窗 口 很 小 时 ， 段 落 文 本 所 占 区 域 比 例 很 大 ， 当 窗口 很 大 时 ， 段 落 文本 所 占 区 域 比 
| 例 又 显 小 气 。 边 界 的 随机 应 变 使 页 面 更 加 灵活 。 
3. 调整 栏目 显示 顺序 

边界 可 以 取 负 值 ， 负 值 边界 会 给 设计 带 来 更 多 创意 ， 在 网 页 布局 中 经 常 应 用 该 技巧 。 

【示例 3】 下 面 示 例 模 拟 一 个 页 面 栏目 ， 该 栏目 包括 左右 两 个 分 栏 ， 显 示 效 果 如 图 9.13 所 示 
(test2.html )。 


<style type="text/css"> 


#wrap {/* 设 置 栏目 包含 框 样式 */ 
width: 997px: 旋回 定 栏目 总 宽度 */ 
margin: 12px auto: 谍 定 义 栏目 居中 显示 */ 
} 
#boxl1, #box2 {/* 设 置 左 右 模 块 共同 属性 */ 
float: left: /# 回 左 浮动 #/ 
height: 376px: 上 诸 固 定 高 度 */ 
backeground-position: center center; /# 背 景 居中 头 / 
background-repeat: no-repeat:} 计 背 景 禁止 平 铺 */ 
#boxl1 {/* 定 义 左 侧 模块 */ 
width: 408px: 诺 固 定 宽度 */ 
background-image: url(images/22.png):} 上 定义 模拟 子 栏目 效果 图 */ 
#box2 {/* 定 义 右 侧 模块 */ 
width: S89px: /# 固 定 宽度 类 
background-image: url(images/23.pne):} 诺 定 义 模拟 子 栏目 效果 图 */ 


</style> 


<div 1d="wrap"> 


<div 1d="top"><1img src="1mages/21.png" /></div> 


<div 1d="box1"></div> 
<div 1d="box2"></div> 
</div> 
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大 htpvjlocalhost/mysiejtest2.heml 


互联 网 ,INTERNET  ” 搜索 引擎” 电子 


九 月 智能 手机 大 战 即将 开打 : 硬件 实力 大 比拼 


- 加 何 做 一 澡 优秀 的 团队 领导 人 
"“ 智 开 ”家 居 ， 也 可 以 中 互联 网 无 关 


" Facebock 在 艾 关 奖 “ 发 布 ”的 大 平板 是 个 十 之 和气 ? 


“MOcC， 来 揪 救 传统 电视 吧 
* 毛 双 回 营 音 融 招 负面 试 时 的 疯 汪 口 题 ? 


美国 APP:65% 用 户 不 会 每 月 下 载 新 应 用 
- 品牌 020 拉 兰 手记 高 一 起 吕 涯 
-计算 机 也 能 着 CT 片子 自动 泽 医 生 标 出 及 肿瘤 
" 中 小 省 坟 企 业 的 变革 之 路 

* 农产品 020 内 填 新 本 所 视 咎 生活 谋 损 局 

* 接 讯 2 广告 收入 汪 旺 达 75% 与 徐 荔 好 未 间 发 


这 是 一 个 很 普通 的 两 栏 布局 示意 图 , 如 果 想 把 左右 两 栏 位 置换 一 下 ,似乎 很 简单 ， 只 需要 把 HTML 


结构 调整 一 下 即 可 : 
<div 1d="wrap"> 


商务 ”传闻 爆料 ”互联 网 评论 


| 互联 网 图 片 


2901 4 年 Hlsho 二 手 车 呐 计 生 区 成安 加 灿 


A 


4 


ar 
Pe 
ew 
ree 

or 


英 隧 咨 诅 : 2014 年 上 站 年 中 国 二 手 车 电 于 商 


UC 前 永福 - 跨 界 选 择 
B= 


和 主 规 Ss 


学 人 车; “介质 产 
4 成 消 一 大 


| 公司 动态 更 六 

" 亚 马 融 计划 开发 广 寺 投 知 平台 向 从 车 发 开 皇 战 

“ Faccbock 推 中 时 专用 巨型 平板 和 Tvittez 抢 它 人 

" 交战， 传统 企业 加 何 打 碟 豆 联网 什 虑 ? 
"Tvitter 将 搓 出 “ 胸 立 * 按钮 组 合 域 书 已 汪 

"交友 网 中 7o=sk 和 如 何 防止 网 记 “ 风 江 殉 ” 

" 优 惰 土豆 抹 寺 第 必 壤 执 总 监 陈 涡 泽 : 大 雪 据 沪 在 身边 


| 人物 动态 证 包 
“顺丰 创 出 信 王 卫 ; 强大 的 马云 也 深 内 摄 示 的 企业 未 
“小 六 CE0 西 军 : 从 中 关 村 I7 芳 村民 互联 网 黄 诗 

*“ 手 访 teron 他 夫人 王 宇 融 : 一 家 尘 司 有 没有 了 理想，- 
“巨人 同 络 亨 凡 人 史玉柱 : 我 吓 怎 必 小 鞍 戏 策 人 的 
"FayFal 阅 高官 : z=Bay 蕊 好 直接 鲁 宪 汶 FerFel 

" 丢 融 丑 晶 抬 和美 泪 ; 供 力 吾 蜂 民 ] 蔚 房 志 产 020 


图 9.13 ”默认 布局 效果 


<div 1d="top"><1img src="i1mages/21.png" /></div> 


<div 1d="box2"></div> 
<div 1d="box1"></div> 
</div>> 


但 是 ， 当 页 面 很 复杂 时 ， 各 种 标签 相互 典 套 ， 人 代码 成 日 上 千 行 ， 这 个 看 似 简单 的 位 置 调换 ， 可 角 


这 一 发 动 全 和 喘 ， 麻 烦 不 说 ， 甚 至 破坏 布局 。 


其 实 ， 
#boxl { 


只 需要 在 CSS 样式 表 中 添加 如 下 两 个 样式 即 可 ， 演 示 效 末 如 图 9.14 所 示 (test3.html)。 


margin-left:589px; /# 左 栏 左边 界 取 正 值 ， 值 为 右 栏 总 宽度 的 和 头 


} 
#box2 { 


margin-left:-997px;: /* 右 栏 左边 界 取 负 值 ， 值 为 左右 栏 总 宽度 的 和 */ 
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图 9.14 百分比 取 负 值 布局 效果 
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已 
已 


由 


EC (sss 网 页 设计 从 入 门 到 精通 (补课 精 编 县 


在 浮动 布局 时 , 当 窗口 缩小 到 一 定 宽度 , 如 小 于 或 等 于 左右 模块 宽度 总 和 时 , 右边 模块 就 会 错 行 ， 
”通过 边界 取 负 值 能 够 很 好 地 解决 这 个 问题 ， 且 各 种 浏览 器 都 能 够 支持 。 

] 【示例 4】 可 以 使 用 边界 取 负 值 来 对 段落 文本 的 行距 进行 一 些 补偿 和 修整 ， 下 面 示例 通过 margin 
， 取 负 值 来 调整 列表 项 目 之 间 的 行距 ， 比 较 效果 如 图 9.15 所 示 (test4.html)。 


<style type="text/css"> 


margin: 20px; 

font-size: 16px:} 
li { margin-top: -2px: 诺 压 缩 列表 项 之 间 的 空隙 */ 
} 
</style> 


<ul> 
<l> 人 生得 意 须 尽 欢 ，</li> 
<]i> 莫 使 金 模 空 对 月 ! </li> 
<]1i> 天 生 我 材 必 有 用 ，</i> 
<1i> 千 金 散 尽 还 复 来 。</i> 
</ul> 


| x 

] | "ee + so |S woesoen 2 - a ol EI 
信和 各 意 须 尺 欢 。 从 生得 意 须 尽 欢 ， 

档 宇 对 


。 英 使 金 慷 宇 对 月 ! 
。 此 - 天 生 我 材 必 有 用， 
。 千金 散 尽 还 复 来 。 - 千金 冤 尽 还 复 来 。 


压缩 前 压缩 后 
图 9.15 ”压缩 前 后 比较 效果 
负 边 界 对 文本 编排 有 影响 ， 会 间接 缩短 行距 ， 影 啊 段 落 的 显示 效果 。 另 外 ， 可 以 通过 边界 与 补 白 


的 取 负 配合 实现 栏目 背景 色 自 动向 下 延伸 ,利用 边界 取 负 实现 动态 导航 效果 ,通过 边界 取 负 隐藏 不 需 
要 的 内 容 等 。 


六 由 9.3.3 案例: 边界 重合 现象 


在 网 页 排版 中 ， 通 过 margin 调整 栏目 之 间 、 对 象 之 间 的 间距 ， 但 是 元 素 之 间 的 margin 值 会 发 生 
， 重 登 ， 影 响 布 局 效果 ， 使 用 时 应 该 小 心 。 简 单 概括 如 下 : 

加 ”边界 重 示 只 发 生 在 块 状元 素 ， 且 只 是 科 直 相 邻 边界 才 会 发 生 重 和 到 。 

加 ”边界 重 辣 时 ， 两 个 边界 中 最 小 的 那 边 将 被 覆盖 

轴 ” 重 县 只 应 用 于 边界 ， 而 补 白 和 边框 不 会 出 现 重 县。 

| 边界 重 靶 问题 由 于 受 各 种 结构 关系 的 干扰 ， 并非 总 是 按 预想 的 那样 显示 效果 ,下 面 结合 示例 分 别 
， 进 行 讲解 。 

1. 上 边 元 素 不 浮动 ， 下 边 元 素 浮动 

【示例 1】 当 上 边 元 素 不 浮动 ， 下 边 元 素 浮动 时 ， 上 下 元 素 的 margin 不 会 发 生 重 辣 (test.html)。 


<style type="text/css"> 
/#[ 边 界 重 登 1]: 上 边 元 素 不 浮动 ， 下 边 元 素 浮动 ]*/ 


。I34。 
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body {/* 清 除 页 边 距 */ 
margin: 0; /# 通 用 I 下 */ 
padding: 0: /# 适 用 非 IE*/ 


} 

div {/* 设 置 上 下 元 素 共同 属性 */ | Ep 
width: 100px: ee 
height: 100px: 
clear: both; 旋 清 除 并 列 浮动 显示 */ OE 
margin: 20px; 
padding: 20px:;} 

#boxl1 {/* 定 义 上 边 元 素 不 浮动 */ border: solid 20px red;} 

#box2 {/* 定 义 下 边 元 素 浮动 */ float: left: border: solid 20px blue:} 

</style> 


<div id="boxl"> 上 边 元 素 </div> 
<div id="box2"> 下 边 元 素 </div> 


2. 上 边 元 素 浮 动 ， 下 边 元 素 不 浮动 
【示例 2 与 示例 1 相 比 ， 这 是 一 个 相反 的 布局 ， 但 演 染 的 效果 却 截然 不 同 ， 如 图 9.16 所 示 
(testl.htm!l)。 


<style type="text/css"> 

body {/* 清 除 页 边 距 */ 
margin:0; /* 适 用 IE*/ 
padding:0; /* 适 用 非 IE*/ 


} 
div {/* 定 义 上 下 元 素 共 同属 性 */ 
width: 100px: 
height: 1 00px:; 
clear:both:; 
margin:20px:; 
padding:20px:} 
#boxl {/* 定 义 上 边 元 素 浮 动 */ 
float:left: 
border:solid 20px red;} 
#box2 {/* 定 义 下 边 元 素 不 浮动 */border:solid 20px blue:} 
</style> 


<div id="box1"> 上 边 元 素 </div> 
<div id="box2"> 下 边 元 素 </div> 
在 正 中 浏览 ， 上 下 元 素 边 界 发 生 重 倒 现象 。 这 与 上 边 元 素 不 浮动 ， 下 边 元 素 浮 动 所 讨论 的 结论 ， 
是 不 同 的 ， 在 其 他 浏览 器 中 也 具有 相同 的 显示 效果 。 
3. 一 个 元 素 包含 另 一 个 元 素 
一 个 元 素 包 含 另 一 个 元 素 从 结构 上 讲 属于 嵌入 或 包含 关系 ,它们 不 属于 同一 级 别 的 相 邻 关系 , 外 
边 的 元 素 可 以 称 为 父 元 素 ， 里 面 的 元 素 可 以 称 为 子 元 素 。 
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ep (sss 网页 设计 从 入 门 到 精通 〔 答 梨 精 编 县 ) 


x 


和 受 - Ce 导 http://localhost/m PP BC 


x 


二 一 起 httpy/localhost/m Po 


未 重 登 效果 
图 9.16 _ margin 重 营 比较 效果 


| 【示例 3】 下 面 示例 设计 当 定 义 了 父 元 素 的 边框 或 补 白 后 ， 会 看 到 子 元 素 目 动 停 徘 在 父 元 素 内 容 
， 框 的 左上 角 ， 如 图 9.17 所 示 (test2.html)。 如 果 内 容 框 内 包含 其 他 对 象 ， 则 目 动 同 下 分 布 。 子 元 素 的 
边界、 边框 和 补 昌 部 被 包含 在 内 容 框 里 。 不 管 父 、 子 元 素 是 人 否 或 独立 浮动 显示 ， 这 种 效果 在 不 同 浏览 
| 独 中 显示 是 相同 的 。 


<style type="text/css"> 
body {margin: 0; /# 适 用 IE*/padding: 0; /* 适 用 非 IE*/ 
}/* 清 除 页 边 距 */ 
div {/* 定 义 父子 元 素 共同 属性 */ 
margin: 20px; 
padding: 20px; 
float: left:} 
#boxl {/* 定 义 父 元 素 的 属性 */ 
width: S00px: 
height: 300px: 
float: left: 
background-1mage: url(1mages/1.]pe); 
border: solid 20px red:} 
#box2 {/* 定 义 子 元 素 的 属性 */ 
width: 150px:; 
height: 150px; 
float: left: 
background-i1mage: Url(imasges/2.]pg): 
border: solid 20px blue:} 
</style> 


<div 1d="boxl1"> 
<div id="box2"> 子 元 素 </div> 


</div> 
【示例 4】 如 果 取 消 父 元 素 的 边框 和 补 白 ， 并 取消 浮动 显示 ， 这 时 会 发 现 子 元 素 的 边界 越过 父 元 


” 素 的 边界 ， 实 现 了 色 加 ， 其 中 较 大 边界 会 覆盖 较 小 边界 ， 如 图 9.18 所 示 (test3.html)。 


* 230 。 


<style type="text/css"> 
body {margin:0; * 适 用 IE*#/ padding:0; /* 适 用 非 正 */ 
}/* 清 除 页 边 距 */ 
#box1{ /* 不 定义 父 元 素 的 边框 、 补 白 ， 仅 设置 边界 */ 
margin:20px; 诬 父 元 素 的 边界 为 20px*/ 
background-1mage:url(images/]1.Jpe);} 
#box2 { /* 定 义 子 元 素 的 属性 */ 
margin:60px; 诬 子 元 素 的 边界 为 60px*/ 
border:solld 20px red; 
padding:20px; 
width: 150px: 
height: 1 SOpx; 
backeground-1mage:url(1mages/2.]p2):} 
</style> 


<div 1d="box]1"> 
<div id="box2"> 子 元 素 </div> 
</div> 


委 - 一 [ed http://localhost/mysite/test2.htm| DO ~ 用 Elccahox x| | 


图 9.17 正 下 演示 效果 


和 -六 ea hitp:;//localhost/mysite/test3.html P-ac 怕 localhost 昌 出 
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图 9.18 包含 元 素 之 间 的 margin 重 登 现象 


° 237。 


第 9 章 CSS 金 模 型 


x 


全 


Note 


eR (sss 网页 设计 从 入 门 到 精通 〔 答 梨 精 编 县 ) 


” 窑 提示 : 边界 重合 是 网 页 布局 中 经 常 遇 到 的 问题 , 也 是 布局 中 要 重点 考虑 的 因素 。 边界 重 亚 多 发 生 


在 流动 显示 的 块 状元 素 的 上 下 边界 之 间 ， 但 是 如 果 对 象 是 行内 元 素 、 绝 对 定位 的 元 素 ， 它 
们 的 边界 一 般 不 会 重合 .浮动 元 素 一 般 也 不 会 发 生 重 党 现象， 但 它 的 情况 比较 复杂 ,需要 


结合 具体 情况 进行 处 理 。 
在 布局 中 ,最 好 设置 上 下 元 素 的 显示 性 质 相 同 ， 例 如 ,如果 浮动 , 则 都 浮动 ; 如果 不 浮 动 ， 
则 都 不 浮动 。 


如 果实 际 需 要 ， 上 下 元 素 的 显示 属性 (display ) 不 相同 或 者 必须 设置 不 同 的 显示 性 质 ， 如 
上 边 元 素 浮动 ， 下 边 元 素 不 浮动 ， 或 者 相反 ， 此 时 要 保证 设置 浮动 元 素 的 清除 属性 ， 即 
“clear:both:”。 也 可 以 单独 设置 下 边 元 素 的 清除 属性 ， 但 不 能 只 设置 上 边 元 素 为 左右 清 
除 ， 否 则 对 下 边 元 素 无 效 ， 因 为 该 属性 作用 对 象 为 后 面 解 析 的 元 素 。 

当 上 下 元 素 显示 性 质 不 同时 ， 请 务必 计算 好 边界 问题 ， 保 证 版 面 布 局 的 统一 协调 。 由 于 不 
同 浏览 器 对 此 解释 不 一 ， 不 妨 通过 Hack 技术 来 解决 ， 即 通过 为 不 同 浏览 器 设置 不 同 的 边 
界 值 来 实现 显示 的 统一 。 


路。 9.3.4 ”行内 元 素 边界 


根据 盒 模型 基本 规则 ， 任 何 元 素 都 应 有 边界 。 关 于 行内 元 素 的 边界 问题 比较 简单 ， 它 没有 块 状元 


， 素 那样 复杂 多 变 ， 而 且 各 种 浏览 器 对 行内 元 素 的 解析 效果 空前 的 统一 。 


与 边框 一 样 ， 行 内 元 素 的 边界 不 会 改变 行 高 ， 行 高 只 能 由 line-height、font-size 和 vertical-align 属 


性 来 改变 。 与 边框 一 样 ， 行 内 元 素 的 边界 会 挤占 左右 相 邻 文本 的 位 置 , 因此 使 用 边界 可 以 调整 相 邻 元 素 
的 距离 ， 实 现 空格 。 必 外 ， 亚 右边 界 不 会 产生 断 行 ， 边 界 被 浏览 器 看 作 一 个 整体 谋 入 行 凡 元 素 的 两 端 。 


【示例 】 下 面 示 例 演 示 了 当 行 内 元 素 定 义 margin 之 后 ， 它 会 对 左右 两 侧 的 间距 产生 影响 ， 如 图 9.19 


| 所 示 。 


<style type="text/css"> 

p {l* 影 响 行 高 的 属性 类 
line-height: 28px; 
font-size: 16px:; 
vertical-align: middle:} 

span {/* 行 内 元 素 的 边界 */ 
margin: 100px:; 
border: solid 1px blue; 
color: red:} 

</style> 


<p> 五 月 草 长 敬 飞 ， 窗 外 的 春天 盛大 而 暧昧 。 这 样 的 春日 ， 适 合 捧 一 本 丰沛 的 大 书 在 阳光 下 闲 览 。<span> 


“季羡林 的 《 清 塘 荷 韵 》 </span>， 正 是 手边 一 种 : 清淡 的 素 色 封面 ， 一 株 水 墨 荷花 迎风 而 立 ， 书 内 夹 有 同样 的 书 
” 签 ， 季 这 林 的 题 蒜 鼎 有 古人 符 风 姿 。</p> 


XX 


五 月 蔷 长 匣 飞 ， 窗 外 的 者 天 忠 太 而 号 味 。 这 样 的 者 日， 适合 振 
一 本 丰沛 的 大 书 在 阳光 下 几 览 。 茜 疾 林 的 《 清 塘 


位 剖 祖 ， 正 是 手边 一 种 ， 清 淡 的 素 色 封面 ,一 闲 
水 娘 和 茶花 迎风 而 这， 书 内 来 有 同样 的 书签， 季 症 林 的 题 款 颇 有 
古 荷 风姿。 


图 9.19 正 下 预览 效果 
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元 素 的 内 部 空 阶 被 称 为 例 模 型 的 补 白 。 补 白 位 于 元 系 边 框 与 内 容 之 间 ， 更 像 Word 字 处 理 软件 中 
的 页 边 距 。 
设置 补 日 可 以 使 用 padding 属性 ， 例 如 : 


padding:2px; 
padding:2px 4px:; 
padding:2px 4px 6px; 
padding:2px 4px 6px 8px; 


也 可 以 使 用 margin-top、margin-right、margin-bottom、margin-left 属性 独立 设置 上 、 右 、 下 和 左 


边界 的 大 小 ， 例 如 : 


padding-top:2px:; 
padding-right:2em; 
padding-bottom:2%; 
padding-left:auto:; 


诺 定 义 元 素 四 周 补 白 为 2px*/ 

/# 定 义 上 下 补 白 为 2px， 左 右 补 白 为 4px*/ 

/# 定 义 上 补 白 为 2px， 左 右 补 白 为 4px， 下 补 白 为 6px*/ 

访 定 义 上 补 白 为 2px， 右 补 白 为 4px， 下 补 白 为 6px， 左 补 白 为 8px*/ 


启 定 义 元 素 上 补 白 为 2px*/ 
诺 定 义 右 补 白 为 元 素 字 体 的 2 售 */ 
谍 定 义 下 补 白 为 父 元 素 宽度 的 2%*/ 
诺 定 义 左 补 白 为 自动 */ 


与 边界 不 同 , 补 白 取 值 不 可 以 为 负 。 补 白 和 边界 一 样 都 是 透明 的 , 当 设 置 元 素 的 背景 色 或 边框 后 ， 


才能 感觉 到 补 日 的 存在 。 


【示例 】 下 面 示例 设计 导航 列表 项 目 并 列 显 示 ， 然后 通过 补 白 调整 列表 项 目的 显示 大 小 ， 效 果 如 


图 9.20 所 示 。 


<style type="text/css"> 
ul { 必 清 除 列表 样式 */ 
margin: 0; 
paddng: 0; 
list-style-type: none: 


#nav {width: 100%:height: 32px;} 

#nav li {/* 定 义 列表 项 样式 */ 
float: left: 
width: 9%: 
padding: 0 5%;: 
margin: 0 2px; 
background: #def: 
font-size: 16px; 
line-height: 32px; 
text-align: center; 

} 

</style> 

<ul 1d="nav"> 
<]i> 美 丽 说 </li> 
<li> 聚 美 优 品 </1> 
<1> 唯 品 会 </li> 
<l> 蘑 站 街 </li> 


人/# 清 除 正 列表 缩 进 */ 
/# 清 除非 正 列表 缩 进 */ 
话 清 除 列表 样式 */ 


记 定 义 列表 框 宽 和 咒 */ 


谍 浮 动 列表 项 */ 

诺 定 义 百 分 比 宽 度 */ 
让 定义 百分比 补 日 */ 
上 定义 列表 项 间隔 */ 
记 定 义 列表 项 背景 色 */ 


/# 垂 直 居 中 沁 
/# 平 行 居中 志 
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</ul> 


图 9.20 正 下 预览 效果 


在 布局 中 , 混用 边界 和 补 白 来 间隔 不 同 模 块 区 域 或 者 分 隅 相 邻 元 素 。 但 下 面 这 个 问题 应 引起 重视 : 
当 发 生 边 界 重 有 登 或 宽度 洪 出 时 ， 建 议 选 用 补 白 作为 调整 元 素 间距 的 首选 属性 。 为 了 便于 理解 ， 请 看 下 
面 示例 。 

<style type="text/css"> 

#boxl] {margin-bottom: 6px:} 

#box2 {padding-top: 3px;} 

</style> 


<div id="box1"> 上 边 元 素 </div> 

<div id="box2"> 下 边 元 素 </div> 

这 是 一 个 简单 的 示例 , 假设 上 下 两 个 模块 的 间距 为 6px， 现 在 要 调整 box1l 与 box2 的 间距 为 9px， 

此 时 有 4 种 方法 可 供 选 择 : 

增加 boxl 的 margin-bottom 的 属性 为 9px， 但 可 能 会 影响 同行 其 他 模块 的 布局 。 

增加 boxl 的 padding-bottom 的 属性 为 3px， 但 会 使 上 边 元 素 过 于 上 移 而 呈现 突 元 。 

增加 box2 的 margin-top 的 属性 为 3px， 但 由 于 上 下 元 素 边界 的 重 登 而 无 法 实现 。 如 果 要 增 
加 box2 的 margin-top 的 属性 为 9px， 会 存在 更 大 的 布局 危险 。 

加 ”增加 box2 的 padding-top 的 属性 为 3px， 这 样 就 可 以 实现 boxl 与 box2 之 间 的 间距 为 9px， 
但 又 不 会 影响 同行 其 他 元 素 的 布局 ， 整 个 页 面 也 不 会 出 现 过 大 起 伏 错落 。 

补 日 与 边界 、 边 框 一 样 都 是 可 选 的 ， 并 不 是 每 个 元 素 都 必须 全 部 设置 ， 如 果 不 设置 这 些 属性 ， 


Css 默认 其 值 为 0。 但 是 很 多 元 素 已 经 被 浏览 器 预定 了 特定 样式 ， 如 body、p、h1~6、 忆 等， 这 些 巴 
定义 样式 主要 包括 补 白 和 边界 的 属性 设置 。 当 然 ， 也 可 以 重 置 margin 和 padding 为 0， 清除 其 中 的 巴 
”定义 样式 。 为 了 快速 开发 ， 可 以 在 页 面 设计 之 初 ， 用 通 配 选 择 符 清除 所 有 元 素 的 补 白 和 边界 样式 。 


可 以 扫 码 练习 。 


旋 [ 清 除 所 有 元 素 的 预定 义 样式 ]*/ 
| 
margin:0; 上 话 清 除 边 界 值 */ 
padding:0; 旋 清 除 补 白 值 */ 
} 


95 在 线 练 悦 


本 节 专 题 练习 CSS3 的 盒 模型 相关 知识 ， 以 及 应 用 技巧 ， 感 兴趣 的 读者 
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章 


使 用 CSS 布局 网 页 


网 页 版 式 一 般 通过 栏目 的 行 、 列 组 合 来 设计 ， 如 单行 版 式 、 两 行 版 式 、 三 行 版 式 、 多 行 
版 式 、 单 列 版 式 、 两 列 版 式 、 三 列 版 式 等， 根据 网 页 效果 确定 ， 而 不 是 根据 HTML 结构 确 
定 。 也 可 以 根据 栏目 显示 性 质 进行 设计 ， 如 流动 布局 、 浮 动 布 局 、 定 位 布局 、 混 合 布局 等 ， 


方法 。 


或 者 根据 网 页 宽度 进行 设计 ， 如 固定 宽度 、 弹 性 宽度 等 。 本 章 将 有 具体 讲解 CSS3 布局 的 基本 


【 学 习 重 点 】 


| 


于 于 于 于 


了 解 CSS 布局 基础 。 

设计 流动 布局 

设计 浮动 布局 。 

设计 定位 布局 。 

灵活 使 用 不 同方 法 设计 综合 页 面 布 局 效果 。 


Csss 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


10.1 显示 类 型 


网 页 对 象 的 显示 类 型 可 以 使 用 display 属性 来 显 式 定义 。 任 何 元 素 都 可 以 通过 display 属性 改变 默 
示 类 型 ， 因 此 也 会 改变 该 元 素 所 对 应 的 网 页 布局 结构 。 
在 CSS2.1 中 ，display 属性 共有 18 个 选项 值 ， 详 细 说 明 如 下 。 


加 网 加 网 同 加 网 同 网 加 加 负 旬 辐 加 辐 


block: 块 状 显 示 ， 在 元 素 后 面 添加 换行 待 ， 也 就 是 说 其 他 元 素 不 能 在 其 后 面 并 列 显示 。 
none: 隐藏 星 示 ， 这 与 “visibility:hidden:” 声 明 不 同 ，“display:none; ”声明 不 会 为 被 隐藏 
的 元 素 保 留 位 置 。 

inline: 行内 显示 ， 在 元 素 后 面 删除 换行 符 ， 多 个 元 素 可 以 在 一 行内 并 列 显示 。 
inline-block: 行内 显示 ， 但 是 元 素 的 内 容 以 块 状 显示 ， 行 内 其 他 元 素 还 会 显示 在 同一 行内 。 
compact: 紧 凌 的 块 状 显 示 或 基于 内 容 之 上 的 行内 显示 。 

marker: 在 容器 对 象 之 前 或 之 后 显示 ， 该 属性 值 必须 与 :after 和 :before 伪 元 素 一 起 使 用 。 
inline-table: 具有 行内 特征 的 表格 显示 。 

list-item: 具有 块 状 特征 的 列表 项 目 显示 ， 并 可 以 添加 可 选项 目标 志 。 

run-in: 块 状 显示 或 基于 内 容 之 上 的 行内 显示 。 

table: 具有 块 状 特征 的 表格 显示 。 

table-caption: 表格 标题 显示 。 

table-cell: 表格 单元 格 显示 。 

table-column: 表格 列 显示 。 

table-column-group: 表格 列 组 显示 。 

table-header-group: 表格 标题 组 显示 。 

table-footer-group: 表格 页 脚 组 显示 。 

table-row: 表格 行 显示 。 

table-row-group: 表格 行 组 显示 。 


详细 说 明 可 以 参考 CSS 参考 手册 。CSS3 新 增 了 box 显示 类 型 ， 关 于 该 技术 话题 请 参阅 第 9 章 详 


， 细 讲解 。 如 果 单 从 布局 角度 来 分 析 ， 这 些 显 示 类 型 都 可 以 划 归 为 block 和 inline 两 种 基本 显示 形态 ， 
其 他 类 型 都 是 这 两 种 类 型 的 特殊 显示 。 其 中 真正 能 够 应 用 并 获得 所 有 浏览 器 文 持 的 取 值 只 有 4 个 : 
block、 none、inline、list-item。 

none 属性 值 表示 隐藏 并 取消 盒 模型 ， 这 样 元 素 所 包含 的 内 容 就 不 会 被 浏览 器 解析 和 显示 ， 同 样 
这 个 盒子 所 包含 的 任何 元 素 都 会 被 浏览 器 忽略 ， 不 管 它们 是 否 被 声明 为 其 他 属性 。 

list-item 属性 值 表示 列表 项 目 ， 其 实质 上 也 是 块 状 显示 ， 不 过 是 一 种 特殊 的 块 状 类 型 ， 它 增加 了 
缩 进 和 项 目 符号 。 


另外 ， 还 有 一 些 比较 有 用 的 显示 类 型 ， 如 table、table-cell、inline-block、inline-table 等 ， 它 们 在 


”特殊 布局 中 具有 重要 的 实用 价值 。 


10.2 CSS 布局 类 型 


CSS2.1 明确 了 两 个 模型 ， 一 个 是 众所周知 的 盒 模型 (Box model)，CSS1 没有 盒 模 型 的 概念 ， 盒 
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模型 的 前 身 在 CSS1 里 叫 作 面 同 盒 的 格式 化 模型 。 元素 抽象 为 合 ， 以 盒 为 对 象 设计 思路 清晰 很 多 。CSS3 | 
的 盒 模型 丰富 了 更 多 属性 。 盒 的 产生 ， 以 及 盒 的 定位 就 是 CSS2.1 定义 的 第 二 个 模型 :可 视 格式 化 模 ， 
型 (Visual Formatting Model)。CSS3 相关 的 布局 标准 实际 上 也 在 这 个 大 的 框架 之 下 。 | 

CSS 布局 有 明确 标准 始 于 CSS2。 虽 然 CSS1 里 有 Float 元 素 的 定义 ， 但 它 的 设计 不 是 为 页 面 布 局 ， | 
只 是 为 了 实现 图 文 绕 排 ， 所 以 CSS1 里 没有 布局 的 概念 ， 早 期 用 table 布局 便 顺理成章 。CSS2 是 1998 ] 一 一 
年 变 为 推荐 标准 的 ， 按理 此 时 应 该 普及 新 的 CSS 布局 标准 , 但 table 布局 的 使 用 习惯 一 直 保持 到 2004 
年 才 被 Jeffrey Zeldman 的 一 本 书 点 醒 。2005 年 中 文 版 《网 站 重 构 》 出 版 ， 国 内 掀起 重 构 浪潮 。 早 期 
网 页 开发 者 是 受 网 页 制作 软件 ， 如 Frontpage 和 Dreamweaver 等 束缚 的 ， 完 全 没有 标准 的 概念 。 

CSS2.1 的 布局 分 为 3 种 : 常规 流 (Normal Flow)、 浮 动 (Float) 和 绝对 定位 (Absolute Position)， 
这 3 种 不 能 混用 。 如 果 代 码 里 看 到 “position:absolute:display:block:”， 这 种 明显 是 概念 混乱 。 很 多 人 ， 
也 错 把 position:relative 和 position:absolute 归 为 一 类 。position:relative 是 常规 流 中 的 一 种 ， 例 外 是 它 ， 
可 以 和 Float 一 起 使 用 。 

IE6 时 代 被 忽视 的 常规 流 布 局 : 

Inline-Block。 | 

兼容 方法 : 触发 正 的 hasLayout 可 以 实现 相似 的 效果 ， 以 至 于 可 以 兼容 IE6 和 IE7， 该 方法 逐渐 
被 广泛 应 用 。 

CSS Table。 

兼容 方法 : http:/caniuse.comy/#feat=css-table， 仅 不 兼容 IE6 和 IE7， 在 IE6 时 代 被 埋没 。 

对 Float 的 滥用 就 像 当年 对 table 的 小 用。 很 多 人 设计 布局 时 不 假 思索 地 用 Float， 明 显 欠 缺 对 布 ， 
局 技术 有 更 多 了 解 。 尤 其 在 低 端 浏览 器 日 渐 淡 出 ， 新 的 布局 技术 触手 可 及 的 当下 ， 是 时 候 学 习 实践 这 ， 
些 新 技术 了 。 

CSS3 只 是 一 种 笼统 的 叫 法 。 有 CSS Level 1、CSS Level 2， 时 至 今日 还 没有 CSS Level 3。CSS2.1 
之 上 的 新 标准 大 部 分 仍 在 WD 状态 ， 只 有 CSS Color Level 3 和 Selectors Level 3 进入 REC 状态 。 
会 提示 : W3C 各 状态 说 明 请 参阅 第 1 章 说 明 . | 

新 的 布局 标准 可 以 更 简单 、 更 灵活 地 实现 布局 。 目 前 ，CSS3 有 如 下 多 种 布局 方案 。 | 

1. Multi-Column Layout 

当前 状态 : CR。 

历史 : 1999 年 6 月 23 日 发 布 PD，2009 年 12 月 17 日 进入 CR 状态 。 

兼容 性 : http://caniuse.com/#feat=multicolumn 。 
Demo: http://dabblet.com/g1st/5507829, | 
问题 : 

回 ”目前 只 能 平均 分 栏 ， 还 不 支持 分 别 指定 栏 宽 〈 未 来 会 有 ) 。 | 

浏览 器 支持 的 新 旧 标 准 不 一 。 | 

例如 , 在 上 面 Demo 示例 中 , div.intro 的 内 容 想 保持 在 一 栏 中 ，Chrome 支持 “column-break-inside: 
avoid;”， 这 是 2005 年 12 月 15 日 更 新 的 WD 中 的 标准 。 由 此 推测 Chrome 齐 循 的 是 2005 年 的 WD 标 
准 。 目 前 CR 标准 已 改 成 break-inside。Firefox20 实现 的 仍 是 2001 年 的 WD 标准 。 

多 栏 布局 更 适合 用 于 内 容 流 布 局 ， 不 适合 页 面 布局 。 


2. Flexible Box Layout 


当前 状态 :CR。 | 
历史 : 2009 年 7 月 23 日 发 布 PD，2011 年 3 月 22 日 进入 WD 状态 ，2012 年 9 月 18 日 进入 CR | 
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兼容 性 : http://caniuse.com/#feat=flexbox。 

Demo: http://dabblet.com/gist/SS08104。 

Flexible Box 分 为 两 部 分 : Flex 容器 (Flex Container) 和 Flex 项 (Flex Item )。 详 细 说 明 请 参阅 第 
11 草 内 容 。 

3. Template Layout 


(Grid) Template Layout 曾经 称 为 Advanced Layout。 

当前 状态 : WD。 

历史 : 2005 年 12 月 15 日 发 布 PD，2007 年 8 月 9 日 进入 WD 状态 。 最 终 合并 进 Grid Layout。 

4. Grid Position 

历史 : 2007 年 9 月 5 日 发 布 PD， 随 后 被 废弃 。 

$5. Grid Layout 

当前 状态 : WD。 

历史 : 2011 年 4 月 7 日 发 布 PD，2012 年 3 月 22 日 进入 WD 状态 ， 最 新 一 版 是 2013 年 4 月 2 
日 发 布 。 

兼容 性 : http://caniuse.com/#feat=css-grid。 

以 这 种 兼容 性 还 不 值得 介入 学 习 。1996 年 有 个 基于 帧 布局 的 草案 ， 当 时 没 往 这 个 方 同 发 展 ， 最 
终 绝对 定位 进入 CSS2。Grid Layout 正 是 建 在 它 的 基础 之 上 。 

6. CSS3 Floating Boxes 

CSS3 Floating Boxes 被 称 为 CSS3 的 浮动 盒 。 

历史 : 2002 年 10 月 24 日 出 现在 CSS basic box model 的 草案 中 。 

CSS3 的 浮动 盒 技术 过 于 超前 ， 目 前 还 没有 浏览 器 支持 。 例 如 : 

“float: right contour; ”，contour 关键 字 ， 文 字 可 以 沿 图 片 不 规则 的 轮廓 绕 排 。 

“min-height: contain-floats:”， 新 的 清 浮动 方式 。 

“float-displace: block:”， 新 的 float-displace 属性 。 

7. Regions 和 Shapes 

历史 : 2011 年 6 月 9 日 发 布 PD，2011 年 11 月 29 日 进入 WD 状态 ， 最 新 一 版 是 2012 年 8 月 23 
日 发 布 。 

兼容 性 : http://caniuse.com/#feat=css-regions。 

Demo: http://dabblet.com/gist/5509294 (Chrome 19+、 IE10+) 

它 适 用 于 内 容 流 布局 ， 兼 容 性 有 限 ， 不 建议 提前 学 习 。 


10.3 流动 布局 
CSS 包含 3 种 基本 的 布局 模型 ， 用 英文 概括 为 Flow、Layer 和 Float， 它 们 分 别 表示 流动 布局 、 


定位 布局 〈 层 ) 和 浮动 布局 。 流 动 模型 (Flow Model) 是 HTML 默认 布局 模型 ， 默 认 状 态 下 HTML 
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元 素 都 是 根据 流动 模型 分 布 ,并 随 文 档 流 目 上 而 下 按 顺 序 动态 分 布 。 流动 布 局 只 能 根据 元 素 排列 的 先 “ 
后 顺序 决定 显示 位 置 。 如 果 要 改变 元 素 的 显示 位 置 ， 只 能 通过 改变 HTML 文档 结构 实现 。 
流动 布局 模型 的 优势 : 元 素 之 间 不 会 存在 错位 、 才 兰 等 问题 ， 布 局 简单 ， 符 合 浏览 习惯 。 当 然 这 | 


种 布局 模型 的 弱点 也 是 显而易见 的 ， 用 户 不 能 设计 更 灵活 的 版 式 效果 。 | 
10.3.1 流动 元 素 Er 


Re 


流动 是 默认 的 网 页 布局 模式 。 任 何 没 有 定义 “position:absolute;” 或 “position:fixed;” 属 性 ， 以 及 Wm 
没有 定义 “float:left;” 或 “float:right;” 的 元 素 默认 都 呈现 为 流动 布局 状态 。 
下 面 介 绍 流动 布局 模型 比较 典型 的 两 个 特征 。 
第 一 ， 块 状元 素 都 会 在 包含 元 素 内 自 上 而 下 按 顺 序 垂直 堆 著 分布。 在 默认 状态 下 ， 元 素 的 
度 都 为 100%， 占 据 一 行 显示 ， 不 管 这 个 元 素 是 否 包含 内 容 ， 宽 度 是 否 为 100%。 
【示例 】 下 面 示 例 设 计 在 页 面 中 添加 多 个 对 象 ， 浏览 器 都 会 目 上 癌 下 逐个 解析 并 显示 所 有 网 页 对 
象 ， 如 图 10.1 所 示 。 | 


<div 1d="contain"> 
<h2> 标 题 元素 </h2> 
<p> 段 落 元 素 </p> 
<ul> 
<]> 列 表 项 </li> 
</ul> 
<table> 
De 
<td> 表 格 行 ， 单 元 格 </td> 
<td> 表 格 行 ， 单 元 格 </td> 


I 


: | 
Oe /ee sels EE 
标题 元 素 
段落 元 素 


“列表 项 
表格 行 ， 单 元 格 表格 行 ， 单 元 格 


图 10.1 默认 流动 布局 显示 效果 / 


第 二 ,行内 元 素 都 会 在 包含 元 素 内 从 左 到 右 水 平分 布 显 示 ， 有 人 把 这 种 分 布 方式 称 为 文本 流 , 文 ， 
本 流 源 于 文本 的 从 左 向 右 自 然 流 动 ， 本 质 上 它 与 HTTP 传输 方式 和 浏览 览 器 的 解析 机 制 密切 相关 。 超 出 
一 行 后 ， 会 自动 换行 显示 ， 然 后 继续 从 左 到 右 按 顺序 流动 ， 以 此 类 推 。 | 


10.3.2 ”相对 定位 元 素 


当 元 素 定 义 为 相对 定位 ， 即 设置 “position:relative;” 属 性 时 ， 它 也 会 遵循 流动 模型 布局 ， 下 了 讲解 
HTML 文档 流 目 上 而 下 流动 。 
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【示例 1】 下 面 示例 借用 10.3.1 节 的 文档 结构 ， 然 后 单独 定义 p 元 素 以 相对 定位 显示 ， 它 会 严格 
遵循 流动 模型 ， 自 上 而 下 按 顺序 流动 显示 ， 如 图 10.2 所 示 。 这 是 一 个 非常 重要 的 特征 ， 在 实践 中 可 
以 利用 这 一 特征 解决 定位 布局 难题 。 


<style type="text/css"> 
#contain {border: double 4px #999:} 广 定 义 一 个 包含 框 */ 
#contain h2 {background: #FFCCCC:} 放 定 义 标题 背景 色 */ 
#contain p {/* 定 义 段落 属性 */ 
border-bottom: solid lpx #999:; 
position: relative: 诺 设 置 段落 元 素 为 相对 定位 */ 
} 
#contain table {border: solid 1px #00CCFF:} 谍 定 义 表格 边框 */ 
</style> 


<div 1d="contain"> 
<h2> 标 题 元 素 </h2> 
<p> 有 段落 元 素 </p> 
<ul> 
<] 谊 列表 项 </li> 
</ul> 
<table> 
<tr> 
<td> 表 格 行 ， 单 元 格 </td> 
<td> 表 格 行 ， 单 元 格 </td> 
</tr> 
</table> 
</div> 


x 


< » nA 
标题 元 素 
段落 元 素 

*。 列表 项 


| 表格 行 ， 单元 格 表格 行 ， 单 元 格 | 


图 10.2 相对 定位 流动 显示 效果 
【示例 2 在 下 面 示例 中 定义 p 元 素 相 对 偏 移 ， 这 时 会 发 现 它 偏离 原来 的 位 置 ， 但 依然 遵循 流动 
模型 规则 ， 始 终 保持 与 原点 相同 的 位 置 关 系 ， 随 文档 流 整 体 移动 。 
如 果 在 标题 元 素 前 面 增加 多 行 空 行 ,相对 定位 的 p 元 素 会 随 其 他 元 素 一 起 回 下 移动 ,同时 也 会 看 
到 p 元 素 原 位 置 与 偏 移 后 的 位 置 始 终 保持 不 变 ， 如 图 10.3 所 示 。 
<style type="text/css"> 


#contain {border: double 4px #999:} /定义 一 个 包含 框 所 
#contain h2 {background: #FFCCCC:} /# 定 义 标 题 背 景色 #/ 
#contain p {/* 定 义 段 落 元 素 属 性 */ 
border-bottom:solid lpx #999; 
position:relative; 设置 段落 元 素 为 相对 定位 */ 
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left:20pX: 
top:120px; 


} 
#contain table {border: solid 1px #00CCFF:} 
</style> 


<div 1d="contain"> 
<br><br><br><br> 
<h2> 标 题 元 素 </h2> 
<p> 段 落 元 素 </p> 
<ul> 
<] 这 列表 项 </li> 
</ul> 
<table> 
<fr> 
<td> 表 格 行 ， 单 元 格 </td> 
<td> 表 格 行 ， 单 元 格 </td> 
</tr> 
</table> 
</div> 


二 -» 3 http://localhost/m POY 人 0 3 localhost Xx 
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放 定 义 表格 边框 */ 


Ee >》 Ee http:/f/localhost/m PY 0 


此 以 原 位 置 左上 角 为 参考 点 同 右 偏 移 20px*/ 
此 以 原 位 置 左上 角 为 参考 点 向 下 偏 移 120px*/ 


Xx 


标题 元 素 


。 列 表 项 


表格 行 ， 单 元 格 表格 行 ， 单 元 格 


段落 元 素 


相对 偏 移 位 置 


图 10.3 


窑 提示 : 如 果 一 个 绝对 定位 元 素 没有 明确 定义 left 或 right， 则 它 也 会 随 文档 流 在 水 平方 向 上 移动 ; 
如 果 一 个 绝对 定位 元 素 没有 明确 定义 top 或 bottom， 则 它 也 会 随 文档 流 在 重 直 方向 上 移动 。 


10.4 肖 动 布局 


浮动 模型 (Float Model) 汲取 了 流动 布局 和 定位 布局 的 优点 ， 和 希望 在 流动 与 固定 之 间 取 得 一 个 平 
衡 ， 实 现 网 页 布局 的 目 适 应 能 力 。 层 布局 模型 的 问题 是 浏览 器 永远 都 是 一 个 活动 的 窗口 ， 无 法 预知 不 


标题 元 素 


。 列 表 项 


表格 行 ， 单 元 属 表格 行 ， 单 元 格 


相对 定位 流动 显示 效果 


随 文档 流下 沉 


同 浏览 者 所 要 使 用 的 窗口 大 小 ， 同 时 大 部 分 网 页 大 小 本 身 也 是 无 法 预测 和 控制 的 。 


. 247 . 


| eR os (sss 网 页 统计 从 入 门 到 精通 ( 微 神 精 编 版 ) 


”浮动 布局 不 同 于 流动 模式 ,元 素 能 够 脱离 左右 相 邻 元 素 ， 在 包含 框 内 向 左 或 右 侧 浮动 显示 ,但 是 
”浮动 元 素 不 能 脱离 文档 流 ， 依 然 受 文档 流 的 影响 。 


“10.4.1 定义 浮动 显示 


在 默认 情况 下 任何 元 素 不 具有 浮动 特性 ， 可 以 使 用 CSS 的 float 属性 定义 元 素 向 左 或 向 右 浮动 ， 
全 基本 用 法 如 下 : 
= : Re] float: none | left | night 
eek 括 。。。。 其 中 none 表示 消除 浮动 ，left 表示 元 素 向 左 浮动 ，right 表示 元 素 向 右 浮动 ， 默 认 值 为 none。 
ze 下 面 介绍 浮动 布局 模型 的 几 个 特征 。 
| 第 一 ， 浮 动 元 素 以 块 状 显 示 ， 可 以 定义 width 和 height 属性 。 
| 【示例 1】 下 面 示例 为 两 个 span 元 素 定义 高 和 宽 属性 ， 然 后 让 其 中 一 个 span 元 素 浮动 显示 ， 来 
”比较 它们 的 显示 效果 ， 如 图 10.4 所 示 。 


<style type="text/css"> 
span {/* 定 义 行 内 元 素 span 的 显示 属性 */ 
| width:400px: 上 # 定 义 宽 为 400px*/ 
height:200px: 人 # 定 义 高 为 200px*/ 
| border:solid red 1px:} 
| #inline img {width:100px:} 访 定 义 行内 元 素 内 的 图 片 宽 为 100px*/ 
] #float {float:right:} /# 为 第 2 个 行内 元 素 span 定义 浮动 显示 */ 
</style> 


<span id="inline"> 行 内 元 素 流动 显示 

<img src="images/1.jpg" al 人 "流动 的 图 片 " /> 
</Span> 
| <span id="float"> 行 内 元 素 浮动 显示 </span> 


Xx 


© S Er oA 


行内 元 素 浮动 显示 1 行内 元 素 浮动 显示 2 
图 10.4 浮动 显示 与 流动 显示 比较 
”通过 图 10.4 可 以 看 到 ， 当 第 2 个 span 元 素 被 定义 为 浮动 之 后 ， 该 元 素 自 动 以 块 状 显示 ， 因 此 为 
”span 元 素 定义 的 高 和 宽 属性 值 有 效 。 而 第 1 个 元 素 由 于 是 行内 元 素 且 没 有 浮动 显示 , 所 以 定义 的 宽 和 
”高 无 效 ， 所 看 到 的 红色 边框 仅 包 玩 在 行内 元 素 的 外 边 。 
”浮动 元 素 应 该 明确 定义 大 小 。 如 果 浮 动 元 素 没有 定义 宽度 和 高 度 , 它 会 自动 收缩 到 仅 能 包 住 内 容 
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为 止 。 例 如 ， 如 果 浮 动 元 素 内 部 包含 一 张 图 片 ， 则 浮动 元 素 将 与 图 片 一 样 宽 ， 如 果 是 包含 的 文本 ， 则 ， 
浮动 元 素 将 与 最 长 文本 行 一 样 宽 。 而 当 块 状元 素 没 有 定义 宽度 时 ， 则 会 自动 显示 为 100%。 
第 二 ， 浮 动 元 素 与 流动 元 素 可 以 混合 使 用 ,不 会 重 营 ， 都 遵循 先 上 后 下 显示 规则 ， 都 受到 文档 流 ， 
影响 。 但 浮动 元 素 能 够 改变 相 邻 元 素 的 显示 位 置 ， 可 以 同 左 或 同 右 并 列 显示 。 
与 普通 元 素 一 样 ， 浮 动 元 素 始终 位 于 包含 元 素 内 ， 不 会 脱离 包含 框 ， 这 与 定位 元 素 不 同 。 | 
【示例 2】 下 面 示例 以 示例 1 为 基础 ， 然 后 添加 一 个 包含 框 ， 可 以 看 到 第 2 个 span 元 素 靠近 包含 
元 素 div 的 右边 框 浮动 ， 而 不 再 是 body 元 素 的 右边 框 ， 如 图 10.5 所 示 。 
<div 1d="contain"> 
<span id="inline"> 行 内 元 素 流 动 显示 | 
<imeg src="images/1.jpg" al 全 "流动 的 图 片 " /> 
</span> ] 
<span id="float"> 行 内 元 素 浮动 显示 </span> | 
</div> 


图 10.5 ”浮动 元 素 始终 位 于 包含 元 素 | 


| 
第 三 ， 浮 动 元 素 仅 能 改变 水 平 显示 方式 ， 不 能 改变 垂直 显示 方式 ， 依 然 受 文档 流 影 响 。 流 动 元 素 ， 
总 会 以 流动 的 形式 环绕 浮动 元 素 左右 显示 。 
浮动 元 素 不 会 强迫 前 面 的 流动 元 素 环 绕 其 周围 流动 ， 而 总 是 在 上 邻 流 动 元 素 的 下 一 行 浮动 显示 。 
浮动 元 素 不 会 覆盖 其 他 元 素 ， 也 不 会 挤占 其 他 元 素 的 位 置 。 | 
第 四 ， 浮 动 元 素 可 以 并 列 显示 ， 如 果 包 含 框 宽度 不 够 ， 则 会 错 行 显示 。 | 
【示例 3】 下 面 示例 模拟 设计 了 3 个 并 列 显 示 的 栏目 ， 通 过 float 定义 左 、 中 、 右 3 栏 并 列 最 示 ， 
效果 如 图 10.6 所 示 。 | 
<style type="text/css"> 
body {padding: 0:; margin: 0; text-align: center:} 
nain {/* 定 义 网 页 包含 框 样式 */ 
width: 400px:; 
margin: auto: 
padding: 4px: | 
line-height: 160px: 
color: #fff: 
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font-size: 20pX: 
border: solid 2px red:} 
#main div {float: left:height: 160px:} 
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放 定 义 3 个 并 列 栏目 疝 左 浮动 显示 */ 


#left {width: 100px:background: red:} 访 定 义 左 侧 栏 目 样 式 */ 
#middle {width: 200px:;background: blue:} 上 诺 定 义 中 间 栏 目 样 式 */ 
#right {width: 100px; background: green:} 上 诺 定 义 右 侧 栏目 样式 */ 


| 
”所 示 。 
| 
| 


.Clear {clear: both;} 
</style> 


<div 1d="main"> 
<div id="left"> 左 侧 栏目 </div> 
<div id="middle"> 中 间 栏 目 </div> 
<div id="right"> 右 侧 栏 目 </div> 
<br class="clear" /> 


</div> 


Xx 
和 后 是 http://localhost/mysite/ 只 ~ Eocahost x 人 太 3E 


中 间 栏 目 


图 10.6 ”并列 浮动 显示 
浮动 布局 可 以 设计 多 栏 并 列 显 示 效 果 , 但 也 容易 错 行 ， 如 果 浏 览 器 窗口 发 生变 化 或 者 浮动 包含 框 


”不 固定 ， 则 会 出 现 错 行 浮动 显示 问题 ， 破 坏 并 列 布局 效果 。 


10.4.2 ”清除 浮动 


使 用 CSS 的 clear 属性 可 以 清除 浮动 ， 定 义 与 浮动 相 邻 的 元 素 在 必要 的 情况 下 换行 显示 ， 这 样 可 
以 控制 浮动 元 素 挤 在 一 行内 显示 。clear 属性 取 值 包括 4 个 。 

町 1left: 清除 左边 的 浮动 元 素 ， 如 果 左 边 存 在 浮动 元 素 ， 则 当前 元 素 会 换行 显示 。 

阿 right: 清除 右边 的 浮动 元 素 ， 如 果 右 边 存 在 浮动 元 素 ， 则 当前 元 素 会 换行 显示 。 

困 both: 清除 左右 两 边 浮 动 元 素 ， 不 管 哪 边 存在 浮动 对 象 ， 则 当前 元 素 都 会 换行 显示 。 

加 ”none: 默认 值 ， 允 许 两 边 都 可 以 存在 浮动 元 素 ， 当 前 元 系 不 会 主动 换行 显示 。 
【示例 】 下 面 示例 设计 一 个 简单 的 3 行 3 列 页 面 结 构 ， 设 置 中 间 3 栏 平行 浮动 显示 ， 如 图 10.7 


<style type="text/css"> 
dv { 
border: solid 1px red: 诺 增 加 边框 ， 以 方便 观察 */ 
height: S0px: 旋回 定 高 度 ， 以 方便 比较 */ 
} 
#left, 区 nlddle, #right { 
float: left: /# 定 义 中 间 3 栏 回 左 浮动 */ 
width: 33%; 诺 定 义 中 间 3 栏 等 宽 */ 
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} / 
</style> | 


<div id="header"> 头 部 信息 </div> 

<div id="left"> 左 栏 信息 </div> 

<div id="middle"> 中 栏 信息 </div> | 

<div id="right"> 右 栏 信息 </div> 

<div id="footer"> 脚 部 信息 </div> 

如 果 设 置 左 栏 高 度 大 于 中 栏 和 右 栏 高 度 ， 则 发 现 脚 部 信息 栏 上 移 并 环绕 在 左 栏 右 侧 ， 如 图 10.8 
所 示 。 | 


#left {height:100px:} /# 定 义 左 栏 高 出 中 栏 和 右 栏 于 


| 


EY hep/ nocolhos /mystcr: p- sd 和 A 大将 


10.7 正 6 中 浮动 布局 效果 图 10.8 调整 部 分 栏目 高 度 后 发 生 的 错位 现象 
这 时 clear 属性 就 可 以 派 上 用 场 了 ， 为 <div id="footer"> 元 素 定义 一 个 清除 样式 : 


#footer { 
clear:left: 族 为 脚 部 栏目 元 素 定 义 清除 属性 */ | 
} | 


这 时 在 浏览 器 中 预 完 ， 则 又 恢 复 到 预 设 的 3 行 3 列 布局 效果 ， 如 图 10.9 所 示 。 


图 10.9 ”清除 浮动 元 系 错 行 显 示 


会 提示 : clear 属性 是 专门 针对 float 属性 而 设计 的 ， 因 此 仅 能 够 对 左右 两 侧 浮动 元 素 有 效 ， 对 于 非 
浮动 元 素 是 无 效 的 。 
清除 不 是 清除 浮动 元 素 ， 而 是 清除 自身 ， 也 即 不 允许 当前 元 素 与 浮动 元 素 并 列 显示 。 如 果 
左右 两 侧 存在 浮动 元 素 , 则 当前 元 素 把 自己 清除 到 下 一 行 显示 ,而 不 是 把 前 面 的 浮动 元 素 
清除 到 下 一 行 或 者 上 一 行 显 示 。 
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10.4.3 ”浮动 嵌 套 


| 浮动 元 素 可 以 相互 典 套 ， 嵌 套 规律 与 流动 元 素 骨 套 相同 。 浮 动 的 包含 元 素 总 会 目 动 调整 目 身 高 度 
”和 宽度 以 实现 对 浮动 子 元 素 的 包含 。 

【示例 1 新建 文档 ， 构 建 两 个 简单 的 肉 套 块 ， 然 后 强制 它们 浮动 显示 ， 并 定义 子 元 素 的 高 度 和 
宽度 ， 使 其 显示 为 一 定 大 小 的 区 域 ， 这 时 会 发 现 父 元 素 目 动 调整 目 身 大 小 来 包含 子 元 素 ， 如 图 10.10 
”所 示 (test.html)。 


<style type="text/css"> 

.wrap {border: solid 2px red: float: left: margin:4px;} 

.sub {width: 200px; height: 200px; float: left; background: blue;} 
</style> 


<div class="wrap"> 

<div class="sub"></div> 
</div> 
<span class="wrap"> 

<span class="sub"></span> 
</span> 


图 10.10 浮动 嵌 套 


全 提示 : 如 果 包 含 元 素 定义 了 高 度 和 宽度 ， 则 它 就 不 会 随 子 元 素 的 大 小 而 自动 调整 自身 显示 区 域 来 
适应 子 元 素 的 显示 ， 如 图 10.11 所 示 (testl.html ) 。 注 意 ， 在 IE6 及 更 低 版 本 浏览 器 中 包 
含 框 仍然 能 够 自动 调整 自身 大 小 来 适应 子 元 素 的 显示 大 小 , 不 过 在 IE7 版 本 中 微软 纠正 了 
这 个 不 符合 标准 的 显示 方法 。 


二 | EE http://ocalhostimysit PD 明 0 


图 10.11 浮动 嵌 套 存在 问题 


。2D2。 
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【示例 2】 如 果 把 浮动 元 素 嵌 入 流动 元 素 之 内 ， 则 父 元 素 不 能 够 自 适应 子 浮动 元 素 的 高 度 ， 如 
图 10.12 所 示 (test2.html)。 


<style type="text/css"> | 
#contain {background: #FF99FF:}/* 包 含 元 素 */ | EE | 
span {float: left; width: 200px: height: 100px:;}/* 定 义 共 同属 性 */ | ~ 
谍 内 帐 浮动 对 象 样式 */ PNT 


#spanl {border: solid blue 10px:} | 
#span2 {border: solid red 10px:} 
</style> 


<div 1d="contain"> 
<span id="span1">span 元 素 浮动 </span> 
<span id="span2">span 元 素 浮动 </span> 
</div> 


在 图 10.12 中 可 以 看 到 包含 元 素 div 并 没有 显示 。 原 因 就 是 包含 元 素 没有 适应 子 元 素 的 高 度 , 而 
是 根据 自身 定义 的 属性 以 独立 的 形式 显示 。 所 以 , 在 应 用 混合 嵌 套 时 ， 要 预测 到 浮动 与 流动 混合 布局 | 
时 会 出 现 的 各 种 现象 ， 并 积极 做 好 兼容 处 理 。 | 
解决 方法 : 可 以 在 包含 元 素 内 的 最 后 一 行 添加 一 个 清除 元 素 ， 强 制 撑 开 包含 元 素 ， 使 其 包含 浮动 | 
元 素 ， 显 示 结 果 如 图 10.13 所 示 (test3.html)。 


<style type="text/css"> | 
#contain {background: #FF99FF:;}/* 包 含 元 素 */ | 
span {float: left; width: 200px: height: 100px:;}/* 定 义 共 同属 性 */ | 
谍 内 典 浮 动 对 象 样式 */ 
#spanl] {border: solid blue 10px:} 
#span2 {border: solid red 10px:} 
.clear {/* 定 义 清除 类 */ | 
clear:both:} ] 
</style> | 


<div 1d="contain"> 

<span ld="span1">span 元 素 浮动 </span> 

<span id="span2">span 元 素 浮动 </span> 

<div class="clear"></div><!-- 增 加 一 个 清除 元 素 --> 
</div> 


| 
到 | 
| 
| 


其 
ee > Bhtip:Wlocalhost/mysite/y DO ~ 县 由 和 所- CS 名 Na 轻 localhos _ 依 女 好 
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An 


图 10.12 峰 套 浮动 元 素 图 10.13 正确 显示 效果 | 


。 LO。 
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es / 10.4.4 ”案例 : 混合 浮动 布局 


| 浮动 布局 模型 相 比 流动 布局 模型 要 复杂 很 多 ， 当 混合 浮动 和 流动 布局 时 就 容易 遇 到 很 多 问题 ,下 
到 面 结合 示例 介绍 常见 问题 和 解决 办 法 。 
1. 调整 左右 栏 间距 

【示例 1】 制 作 一 个 左右 两 栏 的 页 面 ， 左 栏 是 浮动 布局 ， 右 栏 是 流动 布局 ， 显 示 结 果 如 图 10.14 
所 示 (〈testhtml ) 。 


<style type="text/css"> 
#contain {/* 页 面 布局 包含 元 素 */ 
width:774px: 诺 定 义 页 面 宽 */ 
border:double 4px #aaa; 诺 定 义 贝 面 边框 */ 
padding: 12px: 谍 为 页 面包 含 元 素 增加 补 白 */ 
overflow:visible: 上 话 定 义 包含 元 素 自动 伸缩 显示 所 有 包含 内 容 */ 
} 
#contain img {定义 左 侧 图 片 浮动 显 示 */ 
width:200px:; 
height: 100px; 
float:left: 
clear:left: 话 定 义 图 片 单列 显示 */ 
margin:0 12px 6px 0: 谍 定 义 图 片 的 边界 */ 
padding:6px; 
border:solid 1px #999:} 
#contain h2 {/* 定 义 右 侧 标题 居中 */ 
text-align:center;} 
#contain p {/* 定 义 段落 属性 */ 
margin:0; 
padding:0; 
line-height: 1.8em; 
font-size:13px:; 
text-indent:2em:} 
.clear {* 定 义 清除 类 ， 处 理 非 正 浏览 器 不 能 自 适 应 包容 问题 */ 
clear:both:} 
</style> 


<div 1d="contain"> 
<Img src="bgl0.jpg" /> 
<img src="bg7 jpg" /> 
<Img src="bg2.Jpg" /> 
<Img src="bg3.Jpg" /> 
<h2>《 和 荷塘 月 色 》( 节 选 ) </h2> 
<p> 曲 曲折 折 的 荷塘 上 面 ， 弥 望 的 是 田 田 的 叶子 。 叶 子 出 水 很 高 ， 像 享 享 的 舞女 的 初 。…*</p> 
<div class="clear"></div> 
</div> 


| 上 面 示 例 在 图 文 混 排 基础 上 利用 浮动 模型 设计 一 个 更 漂亮 的 图 片 通栏 布局 。 使 用 float 属性 定义 
”所 有 图 片 向 左 浮动 ， 定 义 clear 属性 清除 相 邻 图 片 并 列 浮动 ， 将 一 组 图 片 垂直 排列 。 通 过 定义 左 栏 浮 


。 IDPD4 。 
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动 、 右 栏 流动 ， 以 保证 页 面 中 的 文本 围绕 图 片 在 右 侧 显示 。 


《 答 塘 月 色 》 《节选 ) 


曲 曲折 折 的 商 桔 上 面 ， 弥 望 风 是 田 田 的 叶子 。 叶子 出 水 很 曲 ， 像 吝 邱 的 亚 冯 的 裙 。 技 车 的 叶 
子 中 目 , 零星 地 点 遍 着 些 白花 ; 有 和 乓 娜 地 开车 的 , 有 盖 姓 地 打车 洒 儿 的 正如 一 半 粒 的 明珠 ， 叉 
如 碧 天 里 的 星星 ， 叉 如 刚 出 洽 的 美人 。 微风 过 处 ， 送 未 纵 纳 消音， 优 货 还 处 高 档 上 沙 范 的 歌声 
似 的 。 这 时 候 叶 子 与 花 也 有 一 些 的 前 动 ， 像 闪电 船 ， 委 时 苇 过 荷 超 的 屠 边 去 了 。 叶子 本 是 肩 并 
诊 密 密 坝 挨 才 ,这 人 眩 克 然 有 了 一 道 涤 总 的 流 痕 。 叶 子 成 下 星 序 脉 的 流水 ， 扒 性 了 ， 不 能 见 一 些 
颜色 ; 而 叶子 却 更 见 风 笃 了 。 

月 江 如 流水 一 般 ， 静 静 地 演 在 这 一 片 叶子 和 花 上 。 落落 的 育 埃 泽 起 在 茶 捷 里 。 叶 子 和 花 仿 佛 


在 牛乳 中 洗 过 一 样 ; 叉 像 笼 若 轻 阔 的 营 。 名 然 是 蒲 月 ， 无 上 却 有 一 层 滋 滋 的 云 ， 所 以 不 能 说 
式 ; 但 我 以 为 这 情 是 到 了 好 处 - 一 桂 眠 固 不 可 少 ， 小 辜 也 踢 有 风味 的 。 月光 是 隔 了 树 昭 过 来 
的 ， 高 处 从 生 的 港 木 ， 落 下 稳 差 的 斑 怠 的 轧 影 ， 峭 所 旨 如 秃 一 般 ; 这 弯 的 杨柳 的 称 芒 的 傅 影 ， 
却 叉 像 是 国 在 茶叶 上 * 塘 中 的 月 色 并 不 均匀 , 但 光与影 有 着 和 谐 的 旋律; 如 束 好 玲 上 奏 着 的 名 由 。 

葵 超 的 四 面 ， 远 远 近 近 ， 高 高 佐 上 长 的 都 号 树 ， 而 杨 痢 最 加 。 这 些 树 持 一 片 荷 超 剖 到 团 住 ; 吕 
和 在 小 路 一 半 ， 击 着 几 段 空 阶 ， 像 是 特 为 月 泡 窗 下 的 。 树 色 一 例 是 并 阴 和 的 ， 乍 者 像 一 团 映 妥 ; 但 
杨柳 的 在 姿 ， 便 在 是 穷 里 也 罪 得 出 。 调 梢 上 隐隐 和约 的 的 是 一 市 远 山 ， 只 有 艺术 意 轨 了 。 树 绎 里 
也 扎 着 一 两 点 路 灯光 : 肖 精 打 季 的 ， 是 渴 睡 人 的 腿 。 这 时 和 肯 最 热 六 的， 要 哉 袜 上 的 蝉 声 与 水 里 
的 星 声 ; 但 执 用 是 它们 的 ， 我 什么 出 爱 有 。 


10.14 默认 显示 效果 
如 果 加 大 右 侧 文本 与 左 侧 图 片 之 间 的 间距 ， 一 般 用 户 会 定义 p 元 素 的 margin-left 或 padding-left 
属性 值 ， 但 会 发 现 为 p 元 素 定 义 左边 界 或 左 补 白 之 后 ， 左 右 栏 间距 没有 变 。 
解决 方法 : 不 要 定义 流动 元 素 的 边界 或 补 白 , 而 是 定义 浮动 元 素 的 边界 或 补 白 ， 实现 调控 间距 的 
目的 。 因 为 浮动 元 素 的 边界 和 补 白 不 会 被 流动 元 素 窗 盖 。 例 如 ， 定 义 浮动 图 像 的 右 侧 边界 为 50px， 
则 效果 如 图 10.15 所 示 (testl.html)。 


margin:0 S0px 6px 0; 


Ms EE hatpy/localhostmysite/testt.html Pac 


《荷塘 月 色 》 【节选 ) 


曲 曲 折 折 的 硼 苦 上 面 ， 弥 望 的 是 田 田 的 叶子 * 叶子 出 水 很 高 ， 和 此 齐 理 的 舞 友 的 语 * 层 
层 的 叶子 中 月 ， 零星 地 点 铝 着 些 白花 ， 有 柴 姥 地 开车 的 ， 有 芋 深 地 打 着 朱 儿 的 正如 一 粒 
粒 的 明珠 ， 又 如 碧 天 里 的 星星 ， 尺 如 刚 出 浴 的 美人 。 微风 过 处 ， 送 未 绕 红 清香 ， 仿 章 运 
处 高 楼 上 尘 莫 的 歌声 似 的 。 这 时 候 叶 子 与 花 也 有 一 些 的 颤动 ， 像 闪电 般 ， 夫 时 传 过 若 二 
的 那 边 去 了 。 叶 于 本 旺 启 并肩 密 密 地 接着 ， 这 便 克 然 有 了 一 诅 法 锋 的 旷 访 。 叶 子 底下 呈 
脉 脉 的 注水 ， 遮 位 了 ,不 能 见 一 些 前 色 ; 而 叶子 却 更 见 风 至 了 。 

月 光 如 深水 一 舱 ， 静 静 地 污 在 这 一 片 叶 子 和 花 上 。 簿 薄 的 青 丑 党 起 在 荃 哼 里 。 叶 于 和 
论 念 仇 在 牛乳 中 洗 过 一 样 ! 及 像 花 知 轻 处 的 琴 。 昌 然 是 淇 日 ， 天 上 却 有 一 车 淡淡 的 去 ， 
所 以 趟 能 关照 ; 但 我 以 为 这 恰 是 到 了 好 处 - - 甜 眠 轿 不 可 少 ， 小 睦 也 别有风味 的 。 月 光 
是 隔 了 机 照 过 来 的 ， 高 处 内 生 的 灌木 ， 落 下 参差 的 班 怠 的 黑 影 ， 峭 楞 袖 如 息 一 般 ! 变 变 
的 杨柳 的 稀 朴 的 情 影 ， 却 又 竹 是 画 在 苘 叶 上 。 捷 中 的 月 名 并 不 艾 习 ， 但 光与影 有 着 和 谐 
的 旋律 ， 如 芝 蚌 珍 上 秦 着 的 名 曲 。 

沿革 的 四 面 ， 远 远近 近 ， 高 襄 低 低 的 都 呈 村 ,而 杨 痢 最 刻 。 这 些 树 将 一 片 葵 款 章 至 国 
任 ; 只 在 小 路 一 劳 ， 搬 者 几 段 空隙， 希 是 特 为 月 光 留 下 的 。 振 色 一 例 是 阴 阴 的 ， 乍 各 和希 
一 团 烟 穷 ; 也 疡 元 的 丰 安 ， 便 在 烟 窒 里 也 状 得 出 。 村 梢 上 光 访 约 约 的 是 一 市 远 山 ， 只 和 有 
些 大 总 罢了 *。 树 颖 里 也 忆 若 一 两 点 路 灯光 ， 没 畏 打 采 的 ， 是 渴 睡 人 的 艰 。 这 时 候 最 热 六 
的 ， 要 热 村 上 的 毁 声 与 水 里 的 星 声 : 但 热 六 是 它们 的 ， 我 什么 也 没有 。 


10.1$ ”调控 间距 显示 效果 


2. 调整 上 下 栏 间距 
上 下 栏 之 间 的 浮动 与 流动 混合 布局 也 比较 复杂 ， 如 上 下 栏 间距 不 易 调整 、 布 局 侦 尔 错乱 等 。 


一 
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【示例 2】 以 示例 1 为 基础 上 ， 给 图 文员 面 增加 一 个 导航 条 ， 显 示 结 末 如 图 10.16 所 示 (test2.html)。 
<style type="text/css"> 


| body {/* 定 义 窗口 属性 */ 
yp | margin:0; 人 # 清 除 正 默认 边界 属性 值 */ 
~ padding:0: /# 清 除非 正 默认 补 白 属性 值 */ 
] } 
#nav {/* 定 义 导 航 列表 框 属性 */ 
| margin:0: /# 清 除 正 默认 缩 进 属性 值 */ 
padding:0; /# 清 除非 正 默认 纵 进 属性 值 */ 
list-style-type:none: 诺 清 除 浏览 器 默认 列表 样式 */ 
} 
#nav li {/* 定 义 菜 单列 表 项 显示 效果 */ 
float:left: 诺 回 左 浮动 */ 
width: 100px; height:32px; 
line-height:32px: /#* 垂 直 届 中 权 
text-allign:centerT: 水平 居 中 */ 
background:#7B9F23: 此 背景 色 */ 
margin: 1px: 诺 菜 单间 距 */ 
font-slze:14px:} 
#nav a {text-decoration:none:} 访 定 义 导 航 链接 属性 */ 
#contain {/* 图 文 包含 元 素 */ 
width:774px: 诺 定 义 图 文 框 宽 */ 
border:double 4px #aaa: 放 定 义 图 文 框 边框 */ 
padding: 12px: 话 为 图 文 框 增加 补 白 */ 
overflow:visible: 上 定义 图 文 框 自动 伸缩 显示 所 有 包含 内 容 */ 
} 
#contain img {/* 定 义 左 侧 图 片 浮动 显 示 */ 
width:200px;: helght:100px: 
float:left: clear:left: 诺 定 义 图 片 单列 显示 */ 
margin:0 12px 6px 0: 诺 定 义 图 片 的 边界 */ 
padding:6px: border:solid lpx #999:} 
#contain h2 {text-align:center:} 诺 定 义 右 侧 标题 居中 */ 
#contain p {/* 定 义 段落 属性 */ 
margin:0; padding:0; 


line-height: 1.8em: font-size: 13px; 

text-indent:2em;} 
.clear {clear:both:} 诺 定 义 清除 类 ， 处 理 非 正 浏览 器 不 能 自 适 应 包容 问题 */ 
</style> 


<ul id="nav"><!-- 导 航 菜单 模块 -> 
<]i><a hre 舍 "> 首页 </a>< 沾 > 
<]i><a hre 伍 "> 导航 菜单 1</a></li> 
<]i><a hre 伍 "> 导航 菜单 2</a></li> 
<]i><a hre 伍 "> 导航 菜单 3</a></li> 
<]i><a hre 住 "> 导航 菜单 4</a></li> 
<]i><a hre 伍 "> 导航 菜单 5</a></li> 
<]i><a hre 伍 "> 导航 菜单 6</a></li> 

</ul> 

<div id="contain"><|! 一 图 文 框 模块 --> 


* 250 。 


P- ac 
《和 荷 丹 月 色 》 (节选) 


由 曲折 折 的 葡 塘 上 面 , 弥 望 的 是 田 男 的 叶子 。 叶 子 出 水 很 高 ， 租 亭 襄 的 竹 雪 的 禄 。 屋 层 的 叶 
子 中 间 , 埠 星 地 点 绢 车 些 白 花 , 有 且 邮 地 开 痢 的, 有 香 沁 地 打 着 牛 儿 的 ; 正如 一 粒 短 的 朵 珠 ， 又 
如 王 天 里 的 星星 ， 叉 如 刚 出 浴 的 关 人 ， 微风 过 处 ， 送 来 缕 恋 青 香 ， 仿 佛 远 处 高 楼 上 测 茫 的 歌声 
似 的 。 这 时 假 叶 于 与 花 也 有 一 上 华 的 颤动 像 闪电 般 ， 委 时 传 过 有 墙 的 那 边 去 了 。 叶 子 本 是 肩 并 
肩 室 密 地 滩 着 ， 这 人 蛋 宛 状 有 了 一 道 冀 怕 的 波 演 。 叶 子 底 下 是 驴 脉 的 流水 ， 惠 佳 了 ， 不 能 见 一 些 
颜 和 名， 而 叶子 却 更 风 风 致 了 。 

月 沉 如 流水 一 般 ， 廊 静 地 沪 在 这 一 片 叶 于 和 论 上 。 簿 注 的 青 如 学 起 在 葡 塘 里 叶 于 和 论 念 佛 
在 牛乳 中 洗 过 一 样 ; 及 像 签 着 经 钞 的 回 。 吕 然 是 满月 ， 天 上 却 有 一 屋 淡 淡 的 云 ， 世 以 不 能 朗 
照 ; 但 我 以 为 这 恰 是 到 了 好 处 ~- 醋 眠 固 不 可 少 ， 小 睡 也 别有风味 的 。 月 光 是 隔 了 树 照 过 未 
的 ， 高 处 此 生 的 油 木 ， 落 下 从 差 的 开 奴 的 旦 影 ， 贿 攀 梯 如 拒 一 船 ; 亚 亚 的 杨柳 的 稀 芒 的 倩影 ， 
却 如 像 昨 国 在 荷 叶 上 。 墙 中 的 月 色 关 不 均 名 ,但 光与影 有 着 和 谐 的 旋律 , 如 妈 是 擒 上 卖 车 的 名 曲 。 

茶 墙 的 四 面 ， 远 远近 近 ， 高 高 其 项 的 都 是 树 ， 而 忆 柳 最 多 。 这 些 树 将 一 片 荷 芋 重生 图 住 ; 只 
在 小 路 一 芝 ， 握 着 几 段 空 险 ， 昌 是 特 为 月 光 留 下 的 。 栅 色 一 便 是 阴 阴 的 ， 乍 看 像 一 团 烟 客 ; 但 
杨 桥 的 丰 窜 ， 便 在 烛 脖 里 也 辨 得 出 。 衬 梢 上 隐隐 约 约 的 是 一 带 远 山 ， 只 有 些 大 意 开 了 * 树 绽 里 
也 所 着 一 两 点 路 灯光 ， 浅 畏 打 采 的 ， 是 渴 睡 人 的 腿 。 这 时 候 乌 热闹 的 ， 要 热 材 上 的 曲 户 与 水 里 
的 姓 声 ; 旧 热 疝 是 它们 的 ， 我 什么 也 受 有 。 


10.16 给 页 面 增加 导航 条 
通过 图 10.16 可 以 发 现 导航 条 错位 显示 在 下 面 栏目 内 部 。 解 决 方法 : 在 列表 项 最 后 添加 一 个 清除 


<div class="clear"></div> 


上 述 代码 强迫 Ul 元 素 自 适应 高 度 ， 以 实现 包含 其 内 部 的 浮动 列表 项 。 这 样 就 不 会 出 现 浮 动 元 素 与 流 
动 包含 元 素 相互 脱节 现象 ， 使 浮动 元 素 显 示 在 上 面 栏目 包含 框 中 ， 效 果 如 图 10.17 所 示 (test3.html)。 


a S| httpy/localhostjmysitetest3.html Dr 全 Glocalhost x 


《荷塘 月 色 》 (节选) 


曲 巾 折 折 的 荃 墙 上面 ， 弥 望 的 是 田 田 的 叶子 。 叶 子 出 水 很 高 ， 称 享 训 的 舞 妇 的 裙 。 层 层 的 叶 
子 中 间 , 零星 地 点 幼 着 些 白花 ; 有 委 九 地 开 着 的 ; 有 羞涩 地 打 兰 水 儿 的 ; 正如 一 梯 粒 的 有 明珠， 又 
如 怕 天 里 的 星星 ， 叉 如 刚 | 出 浴 的 美人 。 币 风 过 处 ， 送 来 继 纳 清理， 仿佛 运 处 高 楼 上 种 茫 的 歌声 
向 的 。 这 时 候 叶 子 与 花 也 有 一 些 的 记 动 ， 委 闪电 般 ， 云 时 传 过 荷塘 的 那 边 去 了 。 叶 子 本 是 启 并 
肩 密 窜 地 拨 着 ， 这 鲁 充 然 有 了 一 道 凝 碧 的 波 冲 。 叶 子 底下 是 脉 脉 的 总 水 ， 遮 住 了 ， 不 能 见 一 些 
颜色 ; 而 叶子 却 更 见 风 瑶 了 。 

月 光 如 流水 一 般 ， 静 苍 地 演 在 这 一 片 叶子 和 苍 上 。 落落 的 青 雾 溯 起 在 荷 娘 里 。 叶 子 如 花 仿 志 
在 牛乳 中 洗 过 一 样 ; 只 瞄 答 着 轰 示 的 梦 。 吕 然 是 满月 ， 天 上 却 有 一 层 江 淡 的 云 ， 所 以 不 能 户 
照 ; 但 汽 以 为 这 恰 是 到 了 好 处 - - 酮 服 回 不 可 少 ， 小睡 也 别有风味 的 。 月 光 是 局 了 树 昭 过 来 
的 ， 高 处 内 生 的 灌木 ， 落下 参差 的 网 驴 的 黑 影 ， 贿 相 槐 如 鬼 一 般 ! 弯 挛 的 杨柳 的 铎 蚊 的 傅 影 ， 
却 又 像 是 画 在 月 叶 上 。 姜 中 的 月 色 并 不 均匀 ， 但 光 与 曙 有 荐 和 谐 的 旋律 ; 如 楚 司 玲 上 徐 着 的 省 曲 。 

荷 墙 的 四 面 ， 远 远近 近 ， 高 高 其 傣 的 者 是 料 ， 而 杨 宛 最 窑 。 这些 机 将 一 片 苘 起 重重 围 住 ; 只 
在 小 路 一 容 ， 鲁 着 几 段 空 阶 ， 像 是 特 为 月 光 留 下 的 。 树 色 一 例 是 阴 阴 的 ， 乍 看 淖 一 团 烟 到 ; 但 
杨柳 的 丰 容 ， 便 在 烟 喜 里 也 辩 得 出 。 树 梢 上 包 隐 约 约 的 是 一 帝 远 山 ， 只 有 些 太 章 时 了 。 树 角 里 
也 漏 着 一 两 点 路 灯光 ， 没 精 打 采 的 ， 是 渴 睡 人 的 腿 。 这 时 候 最 热闹 的 ， 要 数 村 上 的 蝴 声 与 水 里 
的 星 声 : 但 热 闵 是 它们 的 ,我 补 必 也 没有 。 


10.17 正确 显示 效果 
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10.5 定位 布局 


定位 模型 也 称 层 模型 (Layer Model), 最 早 源 于 Netscape Navigator 4.0 推出 并 支持 的 Layer ( 层 )。 


医 XZ2 -可以 将 页 面 的 内 容 引入 层 的 概念 ， 模 拟 Photoshop 中 的 层 处 理 技术 ， 摆 脱 HTML 元 素 自然 流动 


带 来 的 素 端 ， 增 强 网 页 处 理 能 

定位 布局 的 设计 思路 比较 简单 ， 它 允许 用 户 精确 定义 网 页 元 素 的 显示 位 置 ， 可 以 是 绝对 位 置 也 
可 以 是 相对 位 置 , 这 里 的 相对 可 以 是 相对 元 素 原来 显示 的 位 置 , 也 可 以 是 相对 最 近 的 定位 包含 框 元 素 ， 
”或 者 是 相对 浏览 器 窗口 。 


比 ”10.5.1 定义 定位 显示 


在 CSS 中 可 以 通过 position 属性 定义 元 素 定 位 显示 ， 其 语法 如 下 : 
position: static | relative | absolute | fixed 


取 值 说 明 如 下 。 
static: 表示 不 定位 ， 元 素 遵循 HTML 默认 的 流动 模型 ， 如 果 未 显 式 声 明 元 素 的 定位 类 型 ， 
则 于 认为 该 值 。 
relative: 表示 相对 定位 ， 它 通过 left、right、top、bottom 属性 确定 元 素 在 正常 文档 流 中 偏 移 
位 置 。 相 对 定位 完成 的 过 程 是 首先 按 static 方式 生成 一 个 元 素 ， 然 后 移动 这 个 元 素 ， 移 动 方 
问 和 幅度 由 left、right、top、bottom 属性 确定 ， 元 素 的 形状 和 偶 移 前 的 位 置 保留 不 动 。 
absolute: 表示 绝对 定位 ， 将 元 素 从 文档 流 中 拖 出 来 ， 然 后 使 用 left、right、top、bottom 属 
性 相对 于 其 最 接近 的 一 个 具有 定位 属性 的 父 定位 包含 框 进行 绝对 定位 。 如 果 不 存在 这 样 的 定 
位 包含 框 ， 则 相对 于 浏览 器 窗口 ， 而 其 层 辣 顺序 则 通过 z-index 属性 来 定义 。 
fixed: 表示 固定 定位 ， 与 absolute 定位 类 型 类 似 ， 但 它 的 定位 包含 框 是 视图 本 身 ， 由 于 视图 
本 号 是 固定 的 , 它 不 会 随 浏览 器 窗口 的 深 动 条 深 动 而 变化 ， 除 非 在 屏幕 中 移动 浏览 器 窗口 的 
屏幕 位 置 或 改变 浏览 器 窗口 的 显示 大 小 , 因此 固定 定位 的 元 素 会 始终 位 于 浏览 器 窗口 内 视图 
的 某 个 位 置 ， 不 会 受 文档 流动 影响 ， 这 与 “background-attachment:fixed; ”属性 功能 相同 。 
与 浮动 元 素 一 样 ， 绝 对 定位 元 素 以 块 状 显示 ， 它 会 为 所 有 子 元 素 建立 一 个 定位 包含 框 ， 所 有 被 包 
售 元 素 都 以 定位 包含 框 作 为 参照 物 进行 定位 ， 或 在 其 内 部 浮动 和 流动 。 
【示例 1】 在 下 面 示例 中 ， 定 义 了 3 个 不 同 模型 的 包含 元 素 ， 然 后 观察 不 同 模 型 的 包含 元 素 与 它 
， 们 的 子 元 素 的 位 置 关 系 ， 如 图 10.18 所 示 。 
<style type="text/css"> 
#contain1, #contain2, #contain3 {/* 定 义 3 个 一 级 div 元 素 对 象 的 共同 属性 */ 
width: 380px:helght: 120px: border: solid lpx #666;} 
#contain2 {l* 定 义 第 2 个 一 级 div 元 素 对 象 为 绝对 定位 ， 并 设置 其 距离 窗口 左边 和 上 边 的 距离 */ 
position: absolute: left: 120px: top: 60px; background: #08080:} 
#contain3 {/* 定 义 第 3 个 一 级 div 元 素 对 象 为 浮动 布局 */ 
float: left; background: #D2B48C:} 
#contain2 div {/* 定 义 绝 对 定位 对 象 内 所 有 子 元 素 对 象 的 共同 属性 */ 
color: #993399: border: solid 1px #FF0000:; 
#sub divl {l* 定 义 绝对 定位 包含 框 内 第 1 个 对 象 为 绝对 定位 */ 
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width: 80px: height: 80px; position: absolute; 
right: 10px; /* 定 义 该 绝对 元 素 右 边 距 离 父 级 定位 包含 框 的 右边 距离 */ | 
bottom: 10px; /* 定 义 该 绝对 元 素 底 边 距 离 父 级 定位 包含 框 的 底 边 距离 */ 
background: #FEF68F:} | 
#sub_div2 {l# 定 义 绝对 定位 包含 框 内 第 2 个 元 素 为 浮动 布局 */ | 
width: 80px; height: 80px: float: left; background: #DDAODD:;} 


#sub_div3 {人 * 定 义 绝对 定位 包含 框 内 第 3 个 元 素 的 背景 色 、 宽 和 高 */ 
width: 100px; height: 90px; background: #CCFF66;} 
</style> | 


<div id="containl"> 元 素 一 流动 </div> | 

<div id="contain2"> 元 素 二 一 绝对 定位 
<div id="sub_div1"> 子 元 素 1 一 绝对 定位 </div> 
<div id="sub_div2"> 子 元 素 2 一 浮动 </div> | 
<div id="sub_div3"> 子 元 素 3 一 流动 </div> 

</div> 

<div id="contain3' 人 > 元 素 三 一 浮动 </div> 


10.18 ”定位 显示 | 


从 图 10.18 可 以 看 到 “元 素 二 ”被 定义 为 绝对 定位 ， 它 以 浏览 器 窗口 为 定位 包含 框 ， 显 示 位 置 根 

据 元 素 左边 到 窗口 左边 的 距离 和 元 素 上 边 到 窗口 上 边 的 距离 来 确定 。 而 “ 子 元 素 1” 却 以 具有 定位 属 ， 

性 的 “元 素 二 ”为 定位 包含 框 ， 显 示 位 置 根 据 “ 子 元 素 1” 右 边 到 “元 素 二 ”右边 的 距离 和 元 素 底 边 

到 “元 素 二 ” 底 边 的 距离 来 确定 。 在 “元 素 二 ”中 包含 了 3 个 子 元 素 ， 它 们 以 不 同 的 性 质 显示 ,但 它 | 

们 都 以 “元 素 二 ”作为 参照 平台 ， 包 括 其 中 的 浮动 元 素 和 绝对 定位 元 素 。 

如 果 把 行内 元 素 作为 定位 包含 框 ， 情 况 就 很 复杂 ， 因 为 行内 元 素 有 可 能 在 几 行内 显示 ,产生 好 几 = 

个 线性 盒 ， 这 时 定位 包含 框 就 被 定义 为 这 几 行 区 域 ， 而 其 内 部 被 包含 的 绝对 定位 子 元 素 将 根据 行内 元 ， 

素 的 第 1 行 第 1 个 字符 左上 角 来 确定 left 和 top 属性 的 偏 移 值 ， 根 据 第 1 行 最 后 1 个 字符 的 右 下 角 来 
确定 right 和 bottom 属性 的 偏 移 值 。 

【示例 2】 在 下 面 示例 中 ,在 文本 段 中 设置 两 个 相互 嵌 套 的 span 元 素 ， 然 后 把 外 层 的 span 元 素 定义 ， 

为 定位 包含 框 ， 而 把 内 层 的 span 元 素 定义 为 绝对 定位 ， 并 进行 偏 移 定位 ， 显 示 效 果 如 图 10.19 所 示 。 

<style type="text/css"> 

p {必定 义 文 本 段 属性 */ | 

width: 400px: height: 200px: 

border: dashed 1px green:} | 

#relative {/* 定 义 定 位 包含 框 ， 并 用 蓝 色 线 框 标示 */ 
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position: relative; 
border: solld 1px blue;} 
#absolute {/* 定 义 绝对 定位 子 元 素 ， 并 向 右 下 角 仿 移 200px*/ 
position: absolute: 
left: 200px: top: 200px:; 
border: solid 2px red:} 
</style> 


<p> 在 用 CSS 控制 排版 过 程 中 ，<span id="relative"> 定 位 一 直 被 人 认为 是 一 个 难点 ,这 主要 是 表现 为 很 多 网 
友 在 没有 深入 理解 清楚 定位 的 原理 时 , 排出 来 的 杂乱 网 页 常 让 他 们 不 知 所 措 , 而 男 一 边 一 些 高 手 则 常常 借助 定位 
的 强大 功能 做 出 些 很 酷 的 效果 来 , <span id="absolute"> 比 如 CSS 相册 等 等 </span>, 因此 自己 杂乱 的 网 页 与 高 手 
完美 的 设计 形成 鲜明 对 比 ，</span> 这 在 一 定 程度 上 打击 了 初学 定位 的 网 友 ， 也 在 他 们 心目 中 形成 这 样 的 一 种 思 
想 : 当 我 熟练 地 玩 转 CSS 定位 时 ， 我 就 已 是 高 手 了 。</p> 


x 


各 人 > Ss httpy/localno t/ mysite Pravc 和 Elocelhost x 作 六 这 


天 I 的 阿 页 与 向 三 完美 的 设 天 
= 明 尘 全 ， 下 各 打击 了 初学 定位 的 网 友 , 也 
ee 这 种 志 想 ， 当 我 熟练 地 玩 转 C53 ， 
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图 10.19 子 元 素 定 位 1 


在 图 10.19 中 ，a 所 指示 的 位 置 为 子 元 素 定 位 前 的 位 置 ，b 所 指示 的 项 角 为 子 元 素 偏 移 的 参考 点 ， 
c 所 指示 的 项 角 为 偏 移 后 的 定位 点 。 可 以 看 到 ， 在 定位 包含 框 多 行 显示 时 ， 内 部 定位 元 素 将 根据 b 点 
(第 1 行 第 1 个 字 的 左上 角 ) 进行 偏 移 定 位 ， 而 不 是 以 文本 段 左 上 角 作 为 参考 点 进行 定位 。 
如 果 定义 right 和 bottom 属性 进行 偏 移 ， 其 中 CSS 代码 如 下 ， 内 部 定位 元 素 将 根据 b 点 (第 1 行 
最 后 1 个 字 的 右 下 角 〉 进行 偏 移 定 位 ， 而 不 是 以 文本 段 右 下 角 作 为 参考 点 进行 定位 。 
#absolute {/* 定 义 绝 对 定位 子 元 素 ， 并 疝 左上 角 偏 移 100px*/ 
position:absolute: 
right: 100px; 
bottom:100px; 
border:solid 2px red:} 


10.5.2 ”相对 定位 


与 绝对 定位 不 同 的 是 ， 相 对 定位 元 素 的 偏 移 量 是 根据 它 在 正常 文档 流 里 的 原始 位 置 计 算 的 , 而 绝 

对 定位 元 素 的 偏 移 量 是 根据 定位 包含 框 的 位 置 计 算 的 。 一 个 绝对 定位 元 素 的 位 置 取决 于 它 的 偏 移 量 : 
top、Tight、bottom 和 left 属性 值 ， 相 对 定位 元 素 的 偶 移 量 与 绝对 定位 一 样 。 

【示例 】 在 下 面 示例 中 ,定义 strong 元 素 对 象 为 相对 定位 ， 然 后 通过 相对 定位 调整 标题 在 文档 顶 


部 的 显示 ， 显 示 效 果 如 图 10.20 所 示 。 
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<style type="text/css"> 
p {margin: 60px; font-size: 14px;} | 
p span {position: relative:} 
Pp strong {*[ 相 对 定位 ]*/ | 


position: relative:; | 会 六 | 
left: 40px; top: -40px: | ~ 


font-size: 18px:} Note 
</style> 


<p> <span><strong> 虞 美人 </strong> 南 唐 \ 宋 李煜 </span> <br> 春 花 秋月 何 时 了 ? <br> 往 事 知 多 少 。<br> 小 楼 | 
昨夜 又 东风 ，<br> 故 国 不 堪 回 首 月 明 中 。<br> 雕 栏 玉 砌 应 犹 在 ，<br> 只 是 朱 颜 改 。<br> 问 君 能 有 几 多 悉 ? <br> 
恰似 一 江 春 水 向 东 流 。 </p> | 
HI@ http//loca.. P- Bo eo -htpi/loca.. P- BO | 
虞 美人 
虞 美人 南 让 宋 李 但 南 喜 宋 李 旦 
春花 秋月 人 时 了 ? 春花 秋月 何 时 了 ? 
往事 和 #0 各 少 。 往事 操 多 少 。 
小 楼 昨夜 又 东风 


故国 不 增 回 首 月 明 中 。 
雕 洋 王 彻 应 钛 在 ， 


只 章 朱 颜 改 。 只 量 玉 额 改 。 
问 看 能 有 几 多 榴 ? 问 丰 能 有 几 多 并 ? 
恰似 一 江 春 水 向 东 流 。 恰似 一 江 害 水 向 东 流 。 | 


定位 前 定位 后 
图 10.20 ”相对 定位 显示 效果 


从 图 10.20 可 以 看 到 ， 相 对 定位 后 ， 元 素 对 象 的 原 空间 保留 不 变 。 相 对 定位 偏离 的 边 距 遵 循 绝对 
定位 中 偏离 规则 ， 不 过 相对 定位 的 定位 包含 框 是 元 素 对 象 的 原 位 置 。 


会 提示 : 相对 定位 元 素 遵循 的 是 流动 布局 模型 ， 存 在 于 正常 的 文档 流 中 ， 但 是 它 的 位 置 可 以 根据 原 
位 置 进行 偏 移 。 由 于 相对 定位 元 素 占有 自己 的 空间 ， 即 原始 位 置 保留 不 变 ， 因 此 它 不 会 挤 
占 其 他 元 素 的 位 置 ， 但 可 以 覆盖 在 其 他 元 素 之 上 进行 显示 。 
与 相对 定位 元 素 不 同 ,绝对 定位 元 素 完全 被 拖 离 正常 文档 流 中 原来 的 空间 ， 且 原来 空间 将 
不 再 被 保留 ， 而 被 相 邻 元 素 挤 占 。 把 绝对 定位 元 素 设 置 在 可 视 区 域 之 外 会 导致 浏览 器 窗口 
的 滚动 条 出 现 。 而 设置 相对 定位 元 素 在 可 视 区 域 之 外 ， 滚 动 条 不 会 出 现 。 | 


10.5.3 ”定位 框 


CSS 定位 包含 框 是 标准 布局 中 一 个 重要 概念 ， 它 是 绝对 定位 的 基础 。 注意 区 分 定位 包含 框 与 父 元 ， 
素 、 包 含 框 或 包含 元 素 等 概念 。 | 

定位 包含 框 就 是 为 绝对 定位 元 素 提供 坐标 偏 移 和 显示 范围 的 参照 物 ， 即 确定 绝对 定位 的 偏 移 起 点 
和 百分比 长 度 的 参考 。 在 默认 状态 下 ，body 元 素 就 是 一 个 根 定位 包含 框 ， 所 有 绝对 定位 的 元 素 就 是 根 ， 
据 窗口 来 确定 自己 所 处 的 位 置 和 百分比 大 小 显示 的 。 但 是 如 果 定 义 了 包含 元 素 为 定位 包含 框 , 对 于 被 包 
含 的 绝对 定位 元 素来 说 ， 就 会 根据 最 接近 的 具有 定位 功能 的 上 级 包含 元 素来 决定 自己 的 显示 位 置 。 

【示例 】 为 了 能 直观 理解 定位 包含 框 ， 下 面 示例 先 构建 一 个 HTML 代码 模块 。 
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| <div 1 ="g'> 
<div id="c"></div> 


</div> 
divid="b"> 
] <div id="d"></div> 
全 网 div> 
Jote 在 上 面 代码 中 ， 构 建 了 两 个 定位 包含 框 ， 它 们 分 别 包 含 了 一 个 元 素 。 下 面 用 CSS 定义 这 两 个 包 


| 含 元 素 的 大 小 为 200px *200px， 并 浮动 在 窗口 的 中 间 区 域 。 
| 考 孝 { 洲 定义 包含 元 素 的 共同 属性 */ 


width:200px; 

height:200px; 

| float:left: 

] margin-top:S0px: 诬 拉 开 与 窗口 顶部 的 距离 */ 
border:solid 1px red: 诺 定 义 红色 边框 线 ， 便 于 识别 */ 


} 
同时 ， 单 独 定义 b 包含 元 素 为 相对 定位 ， 确 定 它 是 一 个 定位 包含 框 。 


#b {l# 定 义 包含 元 素 b 为 相对 定位 ， 确 定 它 为 定位 包含 框 */ 

| position:relative; 

margin-left:S0px; 人 # 拉 开 与 b 包含 元 素 的 距离 */ 

} 

然后 ， 定 义 两 个 被 包含 元 素 为 绝对 定位 ， 大 小 为 50%*50%， 并 都 偏 移 50%。 
#c,#d {* 定 义 被 包含 元 素 为 绝对 定位 ， 并 进行 偏 移 */ 


| width:50%: 

height:50%; 

| position:absolute: 

| left:50%; 虑 与 定位 包含 框 左 侧 边框 距离 为 50%*/ 
top:50%; 上 # 与 定位 包含 框 顶部 边框 距离 为 50%*/ 


DD 
最 后 ， 分 别 为 两 个 被 包含 元 素 定 义 不 同 背景 颜色 ， 以 便于 区 别 ， 则 显示 如 图 10.21 所 示 。 


a EE http://localhost/ mysite /te st.html 岂 - BCl 碟 localhost a 


图 10.21 定义 定位 包含 框 
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在 图 10.21 所 示 的 演示 效果 中 , 被 a 包含 元 素 包含 的 子 元 素 , 以 窗口 body 元 素 的 左上 点 为 坐标 ， 


原点 进行 绝对 定位 偶 移 ， 百 分 比 大 小 取 值 也 根据 窗口 的 大 小 来 确定 ， 即 为 窗口 宽度 和 高 度 的 一 半 。 


而 b 包含 元 素 被 定义 为 相对 定位 ， 它 就 成 了 一 个 定位 包含 框 ， 因 此 ， 被 它 包含 的 d 元 素 就 会 以 b 
元 素 的 左上 角 为 坐标 原点 进行 绝对 定位 偏 移 ， 其 百分比 大 小 取 值 也 会 根据 b 元 素 的 大 小 来 确定 ,而 不 ， 


是 以 窗口 为 参照 物 。 


但 是 ,在 正 早期 版 本 浏览 器 中 对 于 被 包含 的 绝对 定位 元 素 的 百分比 大 小 解析 依然 存在 问题 ， 如 


图 10.22 所 示 。 


htiw: /focahost/mysite /test.himl 


10.22 正中 的 定位 包含 框 显示 效果 


图 10.22 是 上 面 示 例 在 IE6 浏览 器 中 的 预览 效果 ， 可 以 看 到 ， 对 于 坐标 偏 移 解 析 方 面 ，IE 与 其 他 
现代 标准 浏览 器 的 解析 效果 是 一 致 的 ， 即 a 包含 元 素 内 的 c 元 素 根据 最 近 定 位 包含 框 〈 窗口 左上 角 ) 
进行 偏 移 ， 百 分 比 偏 移 大 小 (50%) 也 是 根据 定位 包含 框 大 小 (窗口 大 小 ) 来 确定 的 。 但 是 ， 在 计算 
被 包含 元 素 目 身 大 小 时 ，IE6 与 标准 存在 很 大 的 差异 ，IE6 浏览 器 认为 被 包含 元 素 c 的 百分比 高 和 宽 
应 该 根据 HTML 代码 中 包含 它 的 元 素 的 大 小 来 确定 ， 而 不 是 它 的 最 近 定 位 包含 杠 ， 因 此 c 元 素 显 示 
大 小 (100px*100px) 就 为 a 元素 显示 大 小 (200px*200px)〉 的 四 分 之 一 。 

一 般 情况 下 可 以 用 position 属性 来 定义 任意 定位 包含 枉 ，position 属性 有 效 取 值 包括 absolute、 
fixed、relative。 

有 了 定位 包含 框 , 就 可 以 灵活 设置 绝对 定位 的 化 标 原点 和 它 的 参考 值 。 绝对 定位 打破 了 元 素 的 
有 排列 顺序 ， 满 足 诸如 内 容 优 先 的 排版 需要 ， 也 给 复杂 的 浮动 布局 市 来 方便 。 


10.5.4 ” 层 荆 顺序 


定位 元 素 之 间 可 以 重 登 显 示 ， 这 与 图 像 合成 类 似 。 在 流动 布局 和 浮动 布局 中 是 无 法 实现 这 种 重 琶 


效果 的 ， 因 此 利用 定位 重 登 技术 可 以 创建 动态 网 页 效果 。 


在 CSS 中 可 以 通过 z-index 属性 来 确定 定位 元 素 的 层 登 等 级 。 需 要 声明 的 是 ,zindex 属性 只 有 在 
元 素 的 position 属性 取 值 为 relative、absolute 或 fixed 时 才 可 以 使 用 。 其 中 fixed 属性 值 目 前 还 没有 得 


到 IE 的 支持 。 


【示例 】 在 下 面 示例 中 ,定义 两 个 定位 元 素 , 然后 通过 z-index 属性 调整 它们 的 层 闪 顺序 , 如 图 1023 ， 


所 示 。 
A 
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<style type="text/css"> 

#sub_1,#sub 2 {/* 定 义 子 元 素 绝对 定位 ， 并 设置 宽 和 高 */ 
position: absolute: 
width:200px;: helght:200px:} 

#sub 1 {/* 定 义 第 1 个子 元 素 的 属性 */ 
z-index:10: 人/# 设 置 层 登 等 级 为 10*/ 
left:S0px: top:S0pxX: 
background:red:} 

#sub 2 {l# 定 义 第 2 个 子 元 素 的 属性 */ 
z-index:1: 人/# 设 置 层 登 等 级 为 1*/ 
left:20px: top:20px; 
backeround:blue;} 

</style> 


<div 1d="contain"> 
<div id="sub 1"> 元 素 1</div> 
<div id="sub 2"> 元 素 2</div> 
</div> 


x 


过- > ey hitp://localhost/m pp 至 人 GG 优 localhost 上 


图 10.23 ” 层 登 定位 显示 
z-index 属性 值 越 大 ， 层 倒 级 别 就 越 高 ， 如 果 属 性 值 相同 ， 则 根据 结构 顺序 层 登 。 对 于 未 指定 此 属性 


| 的 绝对 定位 元 素 ， 此 属性 的 number 值 为 正 数 的 元 素 会 在 其 之 上 ， 而 number 值 为 负数 的 元 素 在 其 之 下 。 
“10.5.5 案例 : 混合 定位 布局 


混合 定位 是 利用 相对 定位 的 流动 模型 优势 和 绝对 定位 的 层 布 局 优势 , 实现 网 页 定位 的 灵活 性 和 精 


， 确 性 优势 互补 。 例如， 如 果 给 父 元 素 定 义 为 position:relative， 给 子 元 素 定 义 为 position:absolute， 那 么 
， 子 元 素 的 位 置 将 随 着 父 元 素 ， 而 不 是 整个 页 面 进行 变化 。 


【示例 】 下 面 示例 利用 混合 定位 布局 设计 了 一 个 3 行 2 列 的 页 面 效 果 ， 如 图 10.24 所 示 。 
<style type="text/css"> 


body {/* 定 义 窗 体 属性 */ 
margin: 0; 人/# 清 除 正 默认 边 距 */ 
padding: 0; /# 清 除非 正 默认 边 距 */ 
text-align: center: 诺 设 置 在 正 浏览 器 中 大 中 对 齐 */ 
} 
#contain {/* 定 义 父 元 素 为 相对 定位 ， 实 现 定位 包含 框 */ 
width: 100%%: /# 定 义 宽度 #/ 
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height: 310px; /#* 必 须 定义 父 元 素 的 高 度 ， 该 高 度 应 大 于 绝对 布局 的 最 大 高 度 ， 否 则 父 元 素 背景 色 就 无 法 ， 
显示 ， 且 后 面 的 布局 区 域 也 会 无 法 正确 显示 */ 


position: Telative: 此 定义 为 相对 定位 */ | 
background: #EOEEEE: | 
margin: 0 auto; 记 非 正 浏 览 器 中 居中 显示 */ | Ey | 
} We 
#header, #footer {/* 定 义 头 部 和 上 脚 部 区 域 属性 ， 以 默认 的 流动 模型 布局 */ 
width: 100%; 
height: S0px: | 
background: #COFE3E:; | 
margin: 0 auto; 放 非 正 浏 览 器 中 居中 显示 */ | 


} ' 
#sub containl { /* 定 义 左 侧 子 元 素 为 绝对 定位 */ | 
| 


width: 30%; /# 根 据 定位 包含 框 定义 左 侧 栏目 的 宽度 %/ 
position: absolute: 上 * 定 义 子 栏目 为 绝对 定位 */ 
top: 0; 放 在 定位 包含 框 项 边 对 齐 */ | 
left: 0: /# 在 定位 包含 框 左边 对 齐 状 
height: 300px: 人 * 定 义 高 度 */ ] 


background: #E066FE:} | 
#sub_contain2 {/* 定 义 右 侧 子 元 素 为 绝对 定位 */ | 


width: 70%; 旋 根 据 定位 包含 框 定义 右 侧 栏目 的 宽度 */ | 
position: absolute: /# 定 义 子 栏目 为 绝对 定位 类 
top: 0: /# 在 定位 包含 框 顶 边 对 齐 状 
Tight: 0: 谍 在 定位 包含 框 右边 对 齐 */ ] 
height: 200px: 诺 定 义 高 度 */ 
background: #CDCDO00:} | 
</style> | 


<div id="header"> 标 题 栏 </div> | 
<div 1d="contain"> | 
<div id="sub_contain1"> 左 栏 </div> 
<div id="sub_contain2"> 右 栏 </div> | 
</div> | 
<div id="footer"> 页 脚 </div> 


NE 加 http://loca hcstimysite/test.itml x | 


图 10.24 混合 定位 演示 效果 
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在 上 面 示 例 中 ， 设 计 左右 栏 绝 对 定位 显示 ， 两 栏 包含 框 为 相对 定位 显示 ， 这 样 左 右 栏 就 以 包含 杠 
为 定位 参考 。 由 于 定位 包含 框 的 高 度 不 会 随 子 元 素 的 高 度 而 变化 ， 因 此 要 实现 合理 布局 ， 必 须 给 父 元 
素 定 义 一 个 明确 的 高 度 才 能 显示 包含 框 背景 ， 后 面 的 布局 元 素 也 才能 跟随 绝对 定位 元 素 之 后 正 币 


显示 。 


10.6 案例 实战 


本 节 将 通过 多 个 案例 帮助 用 户 快速 掌握 网 页 布局 的 基本 方法 和 思路 ， 为 网 页 实战 黄 定 扎实 的 基 
” 础 。 所 有 案例 部 包含 5 个 模块 的 典型 标准 结构 ， 下 面 借助 这 个 结构 来 答 试 设计 不 同 的 版 式 效 末 。 通 过 
”这 种 方法 帮助 用 户 快 速 掌握 多 种 布局 效果 的 设计 思路 和 实现 方法 。 


<div 1d="container"> 
<div 1d="header"> 
<hl> 页 眉 区 域 <hl> 
</div> 
<div 1d="wrapper"> 
<div 1d="content"> 
<p><strong>1. 主 体内 容 区 域 </strong></p> 
</div> 
</div> 
<div 1d="navigation"> 
<p><strong>2. 导 航 栏 </strong></p> 
</div> 
<div 1d="extra"> 
<p><strong>3. 其 他 栏目 </strong></p> 
</div> 
<div 1d="footer"> 
<p> 页 脚 区 域 </p> 
</div> 
</div> 


10.6.1 设计 固定 + 弹性 页 面 


| 本 案例 设计 导航 栏 与 其 他 栏目 并 为 一 列 固定 在 右 侧 ， 主 栏 区 域 以 弹性 方式 显示 在 左 侧 ， 实 现 主 栏 
” 目 适 应 页 面 宽度 变化 ， 而 侧 栏 宽度 固定 个 变 的 版 式 效 灯 ， 版 式 结构 示意 图 如 图 10.25 所 示 。 


<div 1d="container"> 


主 栏 区 域 ( 


%) 
其 他 栏目 (px) 
页 脚 区 域 (%) 


</div> 


图 10.25 版 式 结构 示意 图 
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如 果 完 全 使 用 浮动 布局 来 设计 主 栏 自 适应 、 侧 栏 固定 的 版 式 是 存在 很 大 难度 的 , 因为 百分比 取 值 
是 一 个 不 固定 的 宽度 ,让 一 个 不 固定 宽度 的 栏目 与 一 个 固定 宽度 的 栏目 同时 浮动 在 一 行内 , 采用 简单 
的 方法 是 不 行 的 。 
这 里 设计 主 栏 100% 宽 度 ， 然 后 通过 左 外 边 距 取 负 值 强迫 栏目 偏 移出 一 列 的 空间 ， 最 后 把 这 个 腾 。 篇 六 
出 的 区 域 让 给 右 侧 浮动 的 侧 栏 ， 从 而 达到 并 列 浮动 显示 的 目的 。 一 一 
当主 栏 左 外 边 距 取 负 值 时 ， 可 能 部 分 栏目 内 容 显示 在 窗口 外 面 ,为 此 在 说 套 的 子 元 素 中 设置 左 外 医 2X7 习 
边 距 为 父 包含 框 的 左 外 边 距 的 负 值 ， 这 样 就 可 以 把 主 栏 内 容 控制 在 浏览 器 的 显示 区 域 。 
本 示例 的 样式 代码 如 下 ， 设 计 效 果 如 图 10.26 所 示 。 | 
div#wrapper {/* 主 栏 外 框 */ 


float:left: 庄 回 左 浮动 */ 


width:100%; 谍 弹 性 宽度 */ | 
margin-left:-200px 诺 左 侧 外 边 距 ， 负 值 向 左 缩 进 */ | 
| 
div#content {/* 主 栏 内 框 */ | 
margin-left:200px 诺 左 侧 外 边 距 ， 正 值 填 充 缩 进 */ | 
} | 
div#navigation {/* 导 航 栏 */ 
float:right: 诬 辐 右 浮动 */ 
width:200px /# 固 定 宽度 #/ 


} 

div#extra {/#* 其 他 栏 并 
float:right: 诬 回 右 浮 动 */ ] 
clear:right: 访 清 除 右 侧 浮动 ， 避 免 同行 显示 */ 
width:200px 上 固定 宽度 */ 


} ] 

div#footer {/* 页 眉 区 域 */ ] 
clear:both:; 上 旋 清 除 两 侧 浮动 ， 强 迫 外 框 撑 起 */ | 
width:100% 库 宽 度 */ 


< > [es http://localhost/mysite /test.html PP- 0 
| 
页 眉 区 域 | 


1. 主 体内 容 区 域 2 号 航 栏 


min-height right clip top display width overilow-y left z-index. left min-height z-index visibiity top overflow overflow max-width max-height top bottom top 
dsplay z-index display z-index 
Widih width overflow-x clear 


height overflow visibility float overflow-y overflow-x visibility max-widthn clip z-index bottom max-width botiom height 


z-index visibility position max-heighi width clear width bottom max-height overiow position clip position max-hei;ght min-height 

top visibilty position left right clear clear visibility float overiow-y overflow-y position float overflow-x max-width max-width 

overflow-x clip widih display left top z-index visibility overflow-x visibilty max-height max-width clip Width lefi left top overflow width z-index clear height top left 

clip lef overflow-x clip height overflow clip height max-height overflow max-width max-width min-height 
max-width min-height top dlip left 
Cverftlow-x Dottom overtiow-y 
overflow max-width overflow-y 
verflow-y 


图 10.26 ”设计 固 宽 + 自 适 应 两 栏 页 面 


了 


| 
| 
| 
ER 
PR | 
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10.6.2 设计 两 栏 弹 性 页 面 


在 两 栏 浮动 版 式 中 ， 如 果 设 置 两 列 宽 度 都 为 目 适 应 ， 那 么 设置 起 来 会 容易 得 多 。 例如， 定义 两 栏 
版 式 中 主 栏 回 左 浮 动 ， 宽 度 为 70%， 导 航 栏 同 右 浮动 ， 宽 度 为 29.9%。 代 码 如 下 : 


divi#wrapper { 
float:left: /# 回 左 浮动 
width:70% 库 百 分 比 宽度 */ 
} 
divi#navigation { 
float:right: 诺 回 右 浮 动 */ 
width:29.9% 锌 百分比 宽度 所 / 
} 
div#extra { 
clear:both: 人 # 清 除 左 右 浮 动 #/ 
width:100% 记 满 屏 显 示 */ 
} 


| 本 案例 设计 一 个 更 精确 的 两 栏 浮动 且 自 适 应 宽度 的 版 式 。 设置 导航 栏 与 其 他 栏目 并 为 一 列 固 定 在 
， 右 侧 ， 主 栏 区 域 以 弹性 方式 显示 在 左 侧 ， 实 现 主 栏 自 适应 页 面 宽度 变化 ， 而 侧 栏 宽度 固定 不 变 的 版 式 
| 效果 ， 版 式 结构 示意 图 如 图 10.27 所 示 。 


<div 1d="container"> 


页 眉 区 域 (%) 
导航 栏 (%) 


其 他 栏目 (%) 
页 脚 区 域 (%) 


</div> 


主 栏 区 域 (%) 


图 10.27 版 式 结构 示意 图 
设计 的 方法 也 是 采用 负 外 边 距 来 进行 调节 ， 核 心 样式 如 下 所 示 ， 详 细 代 码 请 参阅 本 书 实例 。 


div#wrapper {/* 主 栏 外 框 */ 
float:right: 诺 回 右 浮 动 */ 
width:100%; 诺 弹 性 宽度 */ 
margin-right:-33%; 此 右 侧 外 边 距 ， 负 值 向 右 缩 进 */ 
} 
div#content {/* 主 栏 内 框 */ 
margin-right:33%; 皮 右 侧 外 边 距 ， 正 值 填充 缩 进 */ 
} 
div#navigation {/* 导 航 栏 */ 
float:left: 访 回 右 浮动 */ 
width:32.9%; 此 固定 宽度 */ 
} 
div#extra {/* 其 他 栏 */ 
float:left: 颇 回 左 浮动 */ 
clear:left; 记 清 除 左 侧 浮动 ， 避 人 免 同 行 显示 */ 


* 268 。 
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width:32.9% /# 固 定 宽度 #/ 

} 

div#footer {/* 页 眉 区 域 */ 
clear:both: 上 话 清 除 两 侧 浮动 ， 强 迫 外 框 撑 起 */ 
width:100% /# 宽 度 #/ 


} 


为 了 避免 在 IE7 或 者 其 他 标准 浏览 器 窗口 中 出 现 y 轴 滚 动 条 ， 可 以 为 body 元 素 增加 “overflow- 
x:hidden; ”声明 隐藏 该 深 动 条 ， 最 后 所 设计 的 效果 如 图 10.28 所 示 。 


body {overflow-x:hidden:} 


| EE htpy/localhostimysite/test.html Dr Rv 
页 书 区 域 


4. 主体 内 容 区 域 


min-hsightright clp top dsplay width overfiow-y let z-index left min-height z-index visibility tcp ovarilov: overilovi max-width max-heght tonhatiam ton 
disnlay 7-indax dishlay 7-indax 
wa width overllow-x clear 
z-index yisbillty ptsrion max-height oth clear with botbm ma>-hsioht overlow position clp position max-heignt min-helgnti clip nd erp te I 
top Visibility position lef right clear clear visibility float oveflow-y verflovey posiion floa: orerfiow:x max-widih max-widih ; 


nelgh: ovemcev vigDblIlty ha: OVerTiCW-Y overtiow-Xx vislilty max-Wwidth cillp 2-iNGex pomom max-Wwigin Dottom nelant 


cverflow-x clip widih oisplay leit top 2-ndex visitility overfpw-x visibility max-heghtmax-wdth clip width lft left tpp overlow 
clipleft overflow-x clip heght overflow clip height max-height ovefflowr 


坦 加 寺 去 物 


ovullovw-y 


芷 tn 司 立 物 


页 甩 区 堪 


图 10.28 设计 两 栏 宽度 自 适 应 页 面 
10.6.3 设计 两 栏 浮 动 页 面 
前 面 两 节 分 别 采用 不 同 的 设计 思路 来 设计 两 栏 浮动 版 式 , 下 面 介绍 使 用 男 一 种 思维 来 设计 两 栏 浮 


动 版 式 的 技巧 。 整 个 版 式 设置 导航 栏 固 定 在 左 侧 ， 主 栏 区 域 以 弹性 方式 显示 在 右 侧 ， 以 实现 主 栏 自 适 ， 


应 页 面 宽度 变化 ， 而 其 他 栏目 与 页 脚 区 域 显示 在 底部 ， 版 式 效 果 如 图 10.29 所 示 。 


<div 1d="contaimner"> 


页 眉 区 域 (%) 


图 10.29 版 式 结构 示意 图 | 

设计 的 方法 是 : 让 主 栏 (<div id="wrapper">) 满 屏 显示 ， 即 取 值 为 100%， 然 后 设置 其 包含 的 子 | 
元 素 (<div id="content"> ) 左 侧 外 边 距 为 200px， 预 留 出 一 块 区域 。 最 后 定义 导航 栏 (<div 
id="navigation"> ) 取 值 为 -100%, 也 就 是 强制 其 从 右 侧 的 窗口 外 边 移动 到 主 栏 左 侧 的 预 留 区 域内 显示 。 


520 


于 
一 一 一 人 


Note 
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所 设计 版 式 的 核心 代码 如 下 ， 预 览 效 果 如 图 10.30 所 示 。 


div#wrapper {/* 主 栏 外 包含 框 */ 
float:left: 诺 癌 左 浮动 */ 
width:100% 放 满 屏 宽度 */ 


} 
div#content {/* 主 栏 内 包含 框 */ 


margin-left:200px 颇 左 侧 外 边 距 ， 预 留 空间 */ 
} 


div#navigation {/* 导 航 栏 */ 
float:left: /# 回 左 浮动 专 


width:200px: 旋回 定 宽度 ， 保 持 与 主 栏 左 侧 的 预 留 区 域 的 宽度 一 致 */ 
margin-left:-100% 通过 取 左 外 边 距 负 值 ， 同 左 强 制 移动 到 主 栏 左 侧 的 预 留 区 域 */ 


div#extra {+ 其 他 栏 */ 
clear:left: 上 族 清 除 左 右 浮 动 */ 
width:100% 谍 固 定 宽度 */ 


< 、 Gp ccahos mysto noct him p -sc 
页 眉 区 域 


2. 号 航 栏 1. 圭 体内 容 区 域 


heicht bottom width rey overflow positon overflow righi float clip max-height z-index pos 市 on top left z-ndex bottom min-height heighi width z-index 


max-width clear clip max-height overflow-y bottom display floai overilow bottom min-height ffoat display min-height clear max- 
hoight cvorflovw x dicplay clip float width right clip width moax hcight vicibility cloar loft ovorflow y max hoight > indox right 
bottom display bottom righi float right width z-index right left display cear max-height clip boitom overficw-x z-index 


而 肝 区 域 


图 10.30 ”设计 双 浮 动 兼容 页 面 
10.6.4 ”设计 三 栏 弹性 页 面 
本 案例 通过 浮动 布局 的 方法 ， 以 百分比 为 单位 来 设置 栏目 的 宽度 ， 版 式 结构 示意 图 如 图 10.31 所 示 。 


<div 1d="container"> 


页 眉 区 域 (%) 


页 脚 区 域 (%) 


网 区 域 (% 


</div> 


图 10.31 三 列 弹 性 版 式 结构 示意 图 


*。270。 
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本 案例 采用 负 外 边 距 的 方法 来 进行 设计 ,这 里 设计 三 列 都 癌 左 浮动 ,然后 通过 负 外 边 距 来 定位 每 | 


列 的 显示 位 置 。 布 局 示意 图 如 图 10.32 所 示 。 


margin-left:-100% 


width:25% 


SN LN FA 


导航 栏 (%) 主 栏 区 域 (%) 
页 脚 区 域 (%) 


margin-left:-25% : ; 
图 10.32 三 列 弹性 版 式 布 局 示意 图 


< 负 注意 : 其 他 栏目 在 不 受 外 界 干扰 的 情况 下 会 浮动 在 导航 栏 的 右 侧 ， 但 是 由 于 并 列 浮动 的 总 宽度 超 


出 了 窗口 宽度 , 就 会 发 生 错 位 现象 。 如 果 没 有 负 外 边 距 的 影响 , 则 会 显示 在 第 2 行 的 位 置 ， 
通过 外 边 距 取 负 值 ， 强 连 它们 显示 在 主 栏 区 域 的 上 面 。 核 心 样式 如 下 : 
div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 


float:left: 访 回 左 浮动 */ 
width:100% /# 百 分 比 宽 度 机 
} 
div#content {/* 主 栏 内 包含 框 基本 样式 */ 
margin: 0 25% 上 庶 在 左右 两 侧 预 留 侧 栏 空间 */ 
} 
div#navigation {* 导 航 栏 基本 样式 */ 
float:left: 订 回 左 浮动 */ 
width:2594: /* 百 分 比 宽度 所 
margin-left:-100% 诺 左 外 边 距 取 负 值 进行 定位 */ 
} 
div#extra {/* 其 他 栏 基本 样式 */ 
float:left: 诺 同 左 浮动 */ 
width:2594: 话 百 分 比 宽度 *#/ 
margin-left:-25% 诺 左 外 边 距 取 负 值 进 行 定位 */ 
} 
div#footer {/* 页 脚 包含 框 样式 */ 
clear:left: 计 清 除 左右 浮动 */ 
width:100% 话 百 分 比 宽度 */ 
} 


三 列 弹性 布局 的 版 式 设 计 效 果 如 图 10.33 所 示 (test.html)。 


以 同样 的 设计 方法 ， 如 果 设 置 侧 栏 负 边 距 为 其 他 值 ， 则 可 以 设置 不 同 的 版 式 效 果 。 例如， 如 果 在 | 
上 面 示例 基础 上 , 设置 主 栏 右 侧 外 边 距 为 50%, 定义 导航 栏 左 外 边 距 负 值 为 -50%, 则 会 显示 如 图 10.34 


所 示 效 果 (testl.html)。 


div#content {/* 主 栏 内 包含 框 基 本 样式 */ 
margin-right: 50% 诬 右 侧 外 边 距 */ 


wy 


| 
] } 

] div#navigation {/* 导 航 栏 包含 框 样式 */ 

float:left: 诺 回 左 浮动 */ 

| width:25%; /#* 百 分 比 宽度 所 
margin-left:-50% 谍 左 侧 负 边 距 */ 


EI GS hitp:i/localhosy/ mysit=/test html Arae 


2 与 负 七 1. 王 体内 众 区 域 


UVvellow-xrmnax-heigll z-index lop Ueal Mircheight lefl righl z-index display cleat wii chp vidth clear max-widilh 

visibility cip posilion lefl pusilior cinvex visibility max-widW min-heigul vverflow-y posilion rmax-leiyhl 
overilevex evorlow-x overflow-x height z-index max-width visibility min-he ght 
dip bottom visibilty he ght max-vidth float max-height clip overlow dip 
verilcv-y display right clip min-hsight top righi overlow-y max-width heignt 
zindex dip height float 


z-index overflow-x overflon-y maxcwidih max-vidth right cisrlay ilyal posiion 


vsiblllty max-helaht bottom top bottom display neiht dsplay helant max-width 
werilcew mex-heigh: orerflow overflow float wicth visibility Min-height 
verilcw-x foat clear fioa: posiiion max-widih dsplay w dth overflow-y Widih 
dsplay ilpai pos 击 on Overilow Visibiliy height left overiiow visibility overiow 
widih overflow rmin-heighitop right max-height neght mazrheight width height 
Widih clear right overflow top clear top max-heiyht 


坦 扣 十 冯 拘 


10.33 ”三 列 弹性 版 式 的 布局 效果 (1) 


EN EE hrp:ylocalhosymysits/testhtml PDAravc 


1. 主 体 丹 音 区 域 2 写 航 七 


clear top vidth right everflow-y z-index height right clear z-index ovarflov-y ovarfow-y display position overf ow 
VISIbllty max-height nght overtlow-x z-index width overtlow-y max-vadth Waht dlspiay Noat helahtion visibity 
pasition posifion bottom overlow-y overilow-y min-height boitom right max- 

heiaht position z-irdex position 


二 加 二 艳 物 


top cip siputy min-neignitoo wiomn 

bottom loft right cllp overfiow-y ioat 

visibiily oal max-width Irdx-ie 芭 HL 

float overflow diplay max-mi 
mex-width 


图 10.34 三 列 弹性 版 式 的 布局 效果 (2) 
同样 的 道理 ， 如 果 稍 稍 改变 这 几 个 包含 框 的 外 边 距 ， 会 发 现 网 页 版 式 又 发 生 了 新 的 变化 。 例 如 ， 
把 主 栏 包含 框 的 左 外 边 距 设置 为 50%， 通 过 负 外 边 距 让 导航 栏 包 含 框 向 左 移动 75% 的 距离 ， 而 让 其 
他 栏目 移动 100% 的 距离 ， 则 会 显示 如 图 10.35 所 示 的 效果 (test2.html)。 


div#content {/* 主 栏 内 包含 框 的 基本 样式 */ 
margin-left: 50% 诺 左 侧 外 边 距 */ 


. 

div#navigation {/* 导 航 栏 包含 框 的 基本 样式 */ 
float:left: 床 向 左 浮动 */ 
width:25%: /* 百 分 比 宽 度 #/ 


三 


AZ 
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margin-left:-75% 谍 左 侧 负 边 距 */ 


} 
div#extra {/* 其 他 栏 包含 框 的 基本 样式 */ 


float:left: /# 回 左 浮动 并 
width:2594: /# 百 分 比 宽度 机 
margin-left:-100% 诺 左 侧 负 边 距 */ 


所 > 合 http;#/ /localhost/mysite/test1.html 已 localhost x 


1. 主 体内 容 区 域 

overilow-x fight clear position clip display ficat right clear height display left 
overflow-y min-height height wdth position z-index position postion z-index 
clear right nghi overfiow display overfiow-y float top right width overflow-y float 
clip display top min-height width visibiity lef overflow-x cear top z-index 
bottom cllp overtlow clip max-heignt visibdlity bottom clip left nelght clear max- 
width 


页 肿 区 域 


图 10.35 三 列 弹性 版 式 的 布局 效果 (3) 


这 样 的 设计 可 能 还 有 很 多 种 ， 只 要 你 喜欢 ， 正 如 玩 积木 一 样 你 能 够 搭建 出 很 多 设计 新 颖 的 版 式 


效果 。 
10.6.5 ”设计 两 列 固 定 + 单列 弹性 页 面 


单纯 的 弹性 或 者 固定 版 式 布 局 相对 来 说 都 比较 好 控制 , 但 是 如 条 要 设计 一 列 弹性 、 另 两 列 固 定 的 


版 式 就 比较 肤 烦 。 不 过 灵活 使 用 负 外 边 距 在 网 页 布局 中 的 技巧 ， 可 以 解决 类 似 复杂 布局 。 


本 案例 网 页 结构 继续 沿用 10.6.4 节 的 模板 示例 结构 。 通 过 浮动 布局 的 方法 ,以 百分比 和 像素 为 单 


位 来 设置 栏目 的 宽度 ， 版 式 结构 示意 图 如 图 10.36 所 示 。 


<div 1d="container"> 


页 眉 区 域 (%) 


页 脚 区 域 


</div> 


图 10.36 一 列 弹 性 、 两 列 固 定 版 式 结构 示意 图 


要 定义 导航 栏 和 其 他 栏目 宽度 固定 ,不 妨 选 用 像素 为 单位 ， 对 于 主 栏 则 可 以 采用 百分比 单位 ， 然 


后 通过 负 外 边 距 来 定位 每 列 的 显示 位 置 。 布 局 示意 图 如 图 10.37 所 示 。 


gd 


width: 200pX 


ew 


导航 栏 ( 原 ) | 其 他 栏目 (本 ) | 


HH 


i 其 他 栏目 ( 原 ) | 


margin-left:- 200pxl nn } 
图 10.37 一 列 弹性 、 两 列 固定 版 式 布局 示意 图 


< 全 注意 : 其 他 栏目 在 不 受 外 界 干扰 的 情况 下 会 浮动 在 导航 栏 的 右 侧 ， 但 是 由 于 并 列 浮动 的 总 宽度 超 
| 出 了 窗口 宽度 , 就 会 发 生 错 位 现象 。 如 果 没 有 负 外 边 距 的 影响 , 则 会 显示 在 第 2 行 的 位 置 ， 
通过 外 边 距 取 负 值 ， 强 连 它们 显示 在 主 栏 区 域 的 上 面 。 核 心 样式 如 下 : 
div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 

float:left: /# 回 左 浮动 #/ 

width:100% 让 百分比 宽度 */ 


} 
div#content {/* 主 栏 内 包含 框 基本 样式 */ 


margin: 0 200px 虑 在 左右 两 侧 预 留 侧 栏 空间 */ 
} 
div#navigation {/* 导 航 栏 基本 样式 志 / 

float:left: 计 回 左 浮动 */ 

width:200px: /*# 固 定 宽度 #/ 

margin-left:-100% 记 左 外 边 距 取 负 值 进行 定位 */ 
} 
div#extra {/* 其 他 栏 基 本 样式 */ 

float:left: 皮 问 左 浮动 */ 

width:200px; /# 固 定 宽度 类 

margin-left:-200px 席 左 外 边 距 取 负 值 进行 定位 */ 
} 


一 列 弹性 、 两 列 固 定 版 式 的 布局 效果 如 图 10.38 所 示 (test.html)。 
利用 上 面 的 设计 技巧 ， 也 可 以 设计 很 多 类 似 的 版 式 效 果 。 例 如， 如 果 分 别 调整 侧 栏 和 主 栏 的 外 边 
，” 距 取 值 ， 则 效果 如 图 10.39 所 示 (testl.html)。 


div#content {/* 主 栏 外 包含 框 基 本 样式 */ 


margin-right: 400px 上 谍 通 过 左右 外 边 距 预 留 侧 栏 空间 */ 
} 
div#navigation {/* 导 航 栏 基本 样式 */ 

margin-left:-200px 上 诺 左 外 边 距 取 负 值 进行 精确 定位 */ 
} 
div#extra {/* 其 他 栏 基本 样式 */ 

margin-left:-400px 上 诺 左 外 边 距 取 负 值 进行 精确 定位 */ 


} 


. 274 . 
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过 六 委 hitp:/f/localhost/mysite/fte st html Pr-ad 
页 眉 区 域 


2 号 航 医 1 主体 内容 区 场 


claar bottcm float top Overfiow-f 4 o OE i , 
max-wigtn DoWOm dlsplay max- z-index botiom overflow-y overflow-x min-height cverfiow-x posWion botom z-index top dear clip position 


) 2 
)S 


max-heightheight visibility 和 at min-heighi display clear overflow-x overflow-x max-widtih right pos 击 on 
heignt clp max-widih pesition pesttion width positon ovenlow max-widih tioat nght positbon cp ngnt max- 
height float overflow-y overflow-y max-width widtr min-height left dearoverflow-y clear max-heighi 
Everilow width clip min-height top min-helght 


Note 


bottom 
zindex z-ndex right max-halght 
min-heioht 
right zindex max-hoight pocition 
bottom visibility cip overflow 
clear height top width overf ow-y 
display float height overflovr-y 
min-height visibility foat rignt 
z-index overflow z-index top 


增加 由 六 物 


heighl lop displuy clip Icendisblky 
heiaht position max-width min- 
height overflow-y overflow width 
clcar top overiiow height flcat 
visibility z-index max-width top 


增加 培 刘 物 
页 易 区 域 


10.38 一 列 弹性 、 两 列 固 定 版 式 的 布局 效果 (1) 


后 一 总 hitp://localhost/mysite/test1.h:ml Dorac 
页 眉 区 域 


1. 主 体内 雁 区 域 


top min hcight right display hcioht righi clip visibiity tpp overflow top rnght maox hcioht max width z indcx 
position overflow-x min-height cverfow overflow:x clip visibility display overilov: min-heght min-height tcp 
position overflow min-height clear overflow dip min-height clip overflov overfiow overflow left clear float 
overtlow-y cllp overtlow-¥ man-helght night overtiow-y vistbility top z-index min-heighi lett clear clp right 
z-index max-width clear display right right position right top right dip z-index bottom bottom min-height 
z-index float float 


poasition overflow max-height max-haigh’ width hsigh width float t"n cear top height mn-height overfinow 
position position clear width overflow-x fioat z-index right float max-width overflow-y width clip owerflow-> 
Claar z-index z-index max-heigtt z-index right mn-height leit right position visibility visibility max-height 
overflow-xbotiom clear float clip position display min-height overf ow-x bottom min-height width oyerflovr 
right max-neignt display max-width overlow bottym right clip 


display top posiion heioht 
增 t0 填 刘 槐 


乾 如 二 让 物 


广 野 区域 


10.39 一 列 弹性 、 两 列 固 定 版 式 的 布局 效果 (2) 


10.6.6 ”设计 两 列 弹性 + 单列 固定 页 面 


与 一 列 弹性 、 两 列 固定 版 式 相 比 ， 两 列 弹 性 、 一 列 固定 版 式 似乎 显得 多 余 ， 不 过 当 设 计 一 个 双 主 
题 的 页 面 或 者 两 列 栏目 都 很 重要 的 页 面 时 , 使 用 两 列 弹性 、 一 列 固 定 版 式 进 行 布局 会 让 页 面 更 具有 灵活 
性 。 在 设计 思路 上 二 者 大 同 小 异 ， 相 信和 通过 这 样 单独 的 分 解 ， 更 能 够 引起 读者 的 重视 和 思考 。 

本 案例 的 基本 思路 : 首先 定义 主 栏 外 包含 框 宽度 为 100%， 即 占据 整个 窗口 。 然 后 通过 左右 外 边 
距 来 定义 两 侧 空 白 区 域 ， 预 留 给 侧 栏 占用 。 在 设计 外 边 距 时 ， 一 侧 采 用 百分比 为 单位 ， 另 一 侧 采 用 像 
素 为 单位 ， 这 样 就 可 以 设计 出 两 列 宽度 是 弹性 的 ， 另 一 列 是 固定 的 。 最 后 通过 负 外 边 距 来 定位 侧 栏 的 
显示 位 置 。 

div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 

float:left: 访 向 左 浮动 */ 
width:100% 诺 百 分 比 宽度 */ 
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Csss 网 页 设计 从 入 门 到 精通 ( 微 裸 精 编 版 ) 


} 
div#content {/* 主 栏 内 包含 框 基 本 样式 */ 
margin: 0 33% 0 200px 诺 定 义 左右 两 侧 外 边 距 ,注意 不 同 的 取 值 单位 */ 
} 
div#navigation {/* 导 航 栏 包含 框 基本 样式 */ 
float:left: /# 回 左 浮 动 并 


width:200px: 旋回 定 宽度 */ 
margin-left:-100% 诺 左 外 边 距 取 负 值 进行 精确 定位 */ 


} 
div#extra {/* 其 他 栏 包 含 框 基本 样式 */ 


float:left: 访问 左 浮动 */ 
width:33%;: /# 百 分 比 宽度 机 
margin-left:-33% 上 诺 左 外 边 距 取 负 值 进行 精确 定位 */ 


} 
设计 效果 如 图 10.40 所 示 (test.html)。 


a€ echon 
页 眉 区 域 


1. 主 体内 容 区 域 2 导航 蕊 


lef visibility display min-height top z-index float visibility lef height cveriow-x z-index width float 

width Overmiow Ileit helght visibility Dovertlow-x overtlew-y lett tioat nght max-width VISIbllty display 

display overflow-x :op overlow-x clip overflow-x heght mayx-height min-height min-height min- ow-y left i 

haight min-haighi rght visilility top position overflow-x right clip float lefi overflow righi float width left left tap width disploy 

height visibility left z-index oyerflow-x 
position overflew-y min-height 

Wwp UVeITIUW-y foal MgNl max-Ihrelghnt Wid Wp max4relght DOU Mmex-widUu right vvelllow-y max-width visibility clip left floal 

widih rightoverfllow-x overflow-y right top max-width float overflow-y max-width visitility z-index eet ee bottom width 

tap visihility 和 oaf right vadth clear 7-index width min-height l=ft width min-heighi rt -vidlh heighl display 

float visibility display width width 

right z-index top 

z-index Dverllow z-index left right 

ight width max-width 


sn vvellow cleal wid 由 
right max-widtt max-height max- 
height visibllity 


描 加 让 六 物 


图 10.40 ”两 列 弹性 、 一 列 固定 版 式 的 布局 效果 (1) 


也 可 以 让 主 栏 取 负 外 边 距 进行 定位 ， 其 他 栏目 然 浮动 。 例 如 ,修改 其 中 的 核心 代码 ， 让 主 栏 外 包 
,会 框 回 左 取 负 值 偏 移 25% 的 宽度 ， 也 就 是 隐藏 主 栏 外 框 左 侧 25% 的 宽度 ， 然 后 通过 内 框 来 调整 包含 
内 容 的 显示 位 置 ,使 其 显示 在 窗口 内 ， 最 后 定义 导航 栏 列 左 外 边 距 取 负 值 履 善 在 主 栏 的 右 侧 外 边 距 区 
， 域 上 ， 其 他 栏目 自然 浮动 在 主 栏 右 侧 即 可 。 核 心 代码 如 下 : 
div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 

margin-left:-25% 上 诺 左 外 边 距 取 负 值 进行 精确 定位 */ 


} 
div#content {/* 主 栏 内 包含 框 基 本 样式 */ 
margin: 0 200px 0 25% 席 定 义 左 右 两 侧 外 边 距 ， 注 意 不 同 的 取 值 单位 */ 
} 
div#navigation {/* 导 航 栏 包含 框 基本 样式 */ 
margin-left:-200px 诺 左 外 边 距 取 负 值 进 行 精 确定 位 */ 


} 
div#extra {/* 其 他 栏 包 含 框 基本 样式 */ 


safes 
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width:25% 谍 百 分 比 宽度 */ 
} 


显示 效果 如 图 10.41 所 示 (testl.html)， 其 中 中 间 导 航 栏 的 宽度 是 固定 的 ， 主 栏 区域 和 其 他 栏目 
为 弹性 宽度 显示 。 


和 一 仿 爱 hitp:/localhost/rnysite /te st1. atl 由 ~ 有 dc 
页 眉 区 域 


1. 寺 体内 容 区 域 2 与 航 福 


bottpm width width max-he'oht top min-heioht overflow-> left cverflow-y visibility zincex min- Lp Wp width Noal overfow clip visitilily 


heicht position mir-height min-height widih cverflow dlip clip position max-height heiaht right clip re Eo 


widih left eft display fight dlear oveflow-y widith z-index min-heichttop top overflaw-¥Y max-width visibility overflow position top wicth float 
oveflow-y max-height dispiay top posiion clip clip max-wicth min-haight width >lip max-he ght Position righi max-widih 
lef mir-height max-width clear posiion right display position coverflow overilow-x width visibility visibility max-width position ficat display 


yh ty width cverflow-y min-height min-helght max-wldtn ngnt sllp lett halght visibllity clear float rep max-height epee 
"3 position right overilov-y max-width height 


min-height haight lefi flaat width nverflow-x may-height 7-indiax oveflow-y 7-nriex 7-indey heighi height overflpw-x float clear cip clip clip 
max-height fioat overiow max-width display z-index laft float marx-heignt display left min-height max-heighit 7-index ovemow qin min- 

z inicx top min height z index width overilow min heigh: right ovorfiow ovcrlow x max width height lefl to z-index rightclear righi float 
nelcht visibiltty istbillty dsplay tcp ght cip max-helcht lefl z-index top float width positlon max- pete ng 
Peishl Noal widlhy uve fow-s hzighl op mas-wiclh max-beiyghl clear uve low pusitivn min-l esiglil 

right posmon clp may-helght clear height tioat overticw vistility nght night 坦 加 十 志和 


10.41 两 列 弹性 、 一 列 固定 版 式 的 布局 效果 (2) 


10.7 在 线 练 习 


本 节 专 题 练 习 CSS3 的 布局 方法 、 特 性 和 应 用 技巧 ， 感 兴趣 的 读者 可 以 扫 码 练习 。 


一 


dh ~ 


= 


二 


CSS3 伸缩 盒 布 局 


2009 年 ，W3C 提出 一 种 革新 的 布局 方案 一 一 伸缩 盒 布局 ， 它 可 以 简便 、 完 整 、 响 应 式 
地 实现 各 种 页 面 布 局 ， 自 由 设置 多 个 栏目 在 一 个 容器 中 的 分 布 方 式 ， 以 及 处 理 容 器 内 可 用 的 
室 间 。 使 用 该 模型 可 以 轻松 创建 自 适应 窗口 的 流动 布局 或 者 自 适 应 字体 大 小 的 弹性 布局 。 
W3C 的 伸缩 盒 布 局 分 为 上 四 版 本 、 新 版 本 ， 以 及 混合 过 渡 版 本 3 种 不 同 的 编码 方式 。 其 中 混 
合 过 渡 版 本 主要 是 针对 IE10 做 了 兼容 。 目 前 该 技术 多 应 用 在 移动 端 网 页 布局 ， 本 章 将 主要 
讲解 四 版 本 和 新 版 本 伸缩 盒 布 局 的 基本 用 法 。 

权威 和 参考: http://www.w3.org/TR/css-flexbox-1/。 


【 学 习 重 点 】 

MI 设计 多 列 布局 。 

PI 设计 旧版 伸缩 盒 布局 。 
设计 新 版 伸缩 盒 布 局 。 


第 ]] 章 CSS3 伸缩 金 市 局 


11.1] 多 列 布 局 


CSS3 新 增 columns 属性 ， 用 来 设计 多 列 布局 ， 它 允许 网 页 内 容 跨 栏 显 
权威 参考 : http://www.w3.org/TR/css3-multicol/。 


11.1.1 设置 列 宽 


column-width 属性 可 以 定义 单列 显示 的 宽度 ， 基 本 语法 如 下 : 
column-width: <length> | auto 


取 值 简单 说 明 如 下 。 
加 ”<length>: 用 长 度 值 来 定义 列 宽 。 不 允许 为 负 值 。 
加 ”auto: 根据 <column-count> 目 定 分 配 宽度 ， 为 默认 值 。 
【示例 下面 示例 演示 column-width 属性 在 多 列 布局 中 的 应 用 。 设 计 body 元 素 的 列 宽度 为 300px， 
如 果 网 页 内 容 能 够 在 单列 内 显示 ， 则 会 以 单列 显示 ; 如 果 窗 口 足够 宽 ， 且 内 容 很 多 ， 则 会 在 多 列 中 进 
行 显示 ， 演 示 效 果 如 图 11.1 所 示 ， 根 据 窗口 宽度 目 动 调整 为 两 栏 显示 ， 列 宽度 显示 为 300px。 
<style type="text/css"> 
谨 定 义 网 页 列 宽 为 300px， 则 网 页 中 每 个 栏目 的 最 大 宽度 为 300px*/ 
body {column-width:300px:} 
hl {color: #333333:; padding: Spx 8px:font-slze: 20px;text-align: center: padding: 12px:} 
h2 {font-size: 16px;: text-align: center:} 
p {color: #333333; font-size: 14px: line-height: 180%;: text-indent: 2em;} 
</style> 
<hl>W3C 标准 </h1> 
<p>W3C 的 各 类 技术 标准 在 努力 为 各 类 应 用 的 开发 打造 一 个 <strong> 开 放 的 Web 平台 (Open Web Platform) 
</strong>。 尽 管 这 个 开放 Web 平台 的 边界 在 不 断 延 伸 ， 产 业界 认为 HIMLS 将 是 这 个 平台 的 核心 ， 平 台 的 能 力 
将 依赖 于 W3C 及 其 合作 伙伴 正在 创建 的 一 系列 Web 技术 ， 包 括 CSS，SVG，WOFF， 语 义 Web， 及 XML 和 各 ， 
类 应 用 编程 接口 (APIs)。</p> | 
<p> 截 至 2014 年 3 月 ，W3C 共 设 立 5 个 技术 领域 ， 开 展 23 个 标准 计划 。W3C 设 有 46 个 工作 组 (Working ， 
Group)、14 个 兴趣 小 组 (Interest Group )、3 个 协调 组 (Coordination Group)、169 个 社区 组 (Community Group) ， 
以 及 3 个 业务 组 (Business Group )。</p> 
<p> 目 前 ，W3C 正在 探讨 技术 专家 及 个 人 参与 W3C 标准 制定 过 程 的 Webizen 计划 ， 敬 请 期 待 。</p> 
<p>W3C 于 2014 年 11 月 发 布 了 题 为 &ldquo;W3C 工作 重点 (2014 年 11 月 ) "的 报告 ， 这 是 最 新 的 一 份 对 
W3C 近期 开展 的 工作 要 点 进行 了 综述 的 文章 ， 闸 述 了 近期 的 工作 重点 和 优先 级 。</p> 


11.1.2 设置 列 数 
column-count 属性 可 以 定义 显示 的 列 数 ， 基 本 语法 如 下 : 


column-count: <integer> | auto 
取 值 简单 说 明 如 下 。 
加 ”<integer>: 用 整数 值 来 定义 列 数 。 不 允许 为 负 值 。 


A: Be 


eR ~、 (sss 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


x 


= 由 -| 恒 http://localhost:8080/mysite/test.html ~ 加 是 localhost X 首 不 说 


截至 2014 年 3 月 ，W3C 共 设立 5 个 技术 领域 ， 开 展 23 个 标 
W3C 标 准 准 计 划 。W3C 设 有 46 个 工作 组 《Working Group》、14 个 兴 
小 组 ‘Interest Group〉、3 个 协调 组 《Coordination Group》、 
W3C 的 音 类 技术 标准 在 努力 为 音 炎 应 用 的 开发 打造 一 个 ”169 个 社区 组 (Community Group) ， 以 及 3 个 业务 组 
开放 的 Web 平 台 《Open Web Platform ) 。 尽 管 这 个 开放 Wab {Business Group)】。 


平台 的 边界 在 不 断 延 佑 ， 产 业界 认为 HTML5 将 是 这 个 平台 的 四 
核心 ,平台 的 化 力 将 信 环 于 W3C 及 其 合作 伙伴 正在 创建 的 一 目前 ，W3C 正 在 探讨 技术 专家 及 个 人 和 允 与 W3C 标 准 剂 定 
Note se 过 程 的 Webizen 计 划 ， 笋 请 期 待 。 
| 系列 Web 扶 术 ， 包括 CSS, SVG, WOFF, 语义 Wsb， 及 XML 和 
各 类 应 用 毅 程 接口 APIs;。 W3C 于 2014 年 11 月 发 布 了 题 为 “W3C 工 作 重点 (2014 年 11 
| 月 ; "的 报告 ， 这 是 最 新 的 一 份 对 wW3C 近 期 开展 的 工作 要 点 进 
行 了 综述 的 文章 ， 阁 述 了 近期 的 工作 重点 和 优先 级 。 


图 11.1 固定 列表 宽度 显示 


auto: 根据 <'column-width> 上 自 定 分 配 宽 度 ， 为 默认 值 。 
【 示例】 在 上 面 示例 基础 上 ， 如 果 定 义 网 页 列 数 为 3， 则 不 管 浏览 器 窗口 怎么 调整 ， 页 面 内 容 总 
是 遵循 三 列 布局 ， 演 示 效 果 如 图 11.2 所 示 。 


席 定 义 网 页 列 数 为 3， 这 样 整 个 页 面 总 是 显示 为 3 列 */ 
body {column-count:3;} 


x 


> 由 、 | 乱 http:f/localhost:8080/mysite/test.html ”全 0 有 改 |ocalhost x i: 


WOFF, 语 兴 Web; 及 XNL 和 各 类 应 用 编 目前 ，W3C 正 在 探讨 技术 专家 及 个 
W3C 标 准 程 接口 《APIs) 。 人 参与 W3C 标 准 制定 过 程 的 Webizen 计 


， 划 ， 鞠 请 则 待 。 
右 至 2014 年 3 月 ，W3C 共 设 评 5 个 技 


术 领 域 , 开展 23 个 标准 计划 。W3C 设 有 W3C 于 2014 年 11 月 发 布 了 题 为 
46 个 工作 组 《Working Group》 ，14 个 兴 “W3C 工 作 重 点 【2014 年 11 月 》 "的 报 
郝 小 组 《Intercst Group》 、3 个 协调 组 告 , 这 是 最 新 的 一 份 对 W3C 近 期 开展 的 
- . 人: 四 点 ; AZ 一 综 j 可 童 ， yl Y 
从 ErrML5 竺 是 这 个 平台 的 核心， 平台。 eon Op Tn 
| ' 5 
的 能 力 将 依赖 于 W3C 及 其 合作 快件 正在 “Commity Groop》 ，b 肌 3 个 汪 友 组 期 的 工作 如 点 和 由 先 蜗 


创建 的 一 系列 Web 扶 术 ， 包 括 CSs, SVG， 《Business Group》。 


W3C 的 笃 迷 技术 标准 在 努力 为 各 兴 
应 用 的 开发 打造 一 个 开放 的 Web 平 台 


(Open Web Platform ) 。 尽管 这 个 开 
放 Web 平 台 的 边界 在 不 断 延 虱 ， 产 业 慌 


图 11.2 设计 3 列 显示 
11.1.3 ”设置 旧 距 


column-gap 属性 可 以 定义 两 栏 之 间 的 间距 ， 基 本 语法 如 下 : 
column-gap: <length> | normal 


取 值 简单 说 明 如 下 。 
<length>: 用 长 度 值 来 定义 列 与 列 之 间 的 间 际 。 不 允许 为 负 值 。 
normal: 与 <'font-size 人 > 大 小 相同 。 假 设 该 对 象 的 font-size 为 16px， 则 normal 值 为 16px， 类 推 。 
【示例 】 在 上 面 示 例 基础 上 , 通过 column-gap 和 line-height 属性 配合 使 用 ， 把 文档 版 面 设计 得 政 
朗 大 方 ， 以 方便 阅读 。 其 中 列 间 距 为 3em， 行 高 为 2.5em， 页 面 内 文字 内 容 看 起 来 更 明晰 ， 演 示 效 果 
如 图 11.3 所 示 。 


{ 
/# 定 义 页 面 内 容 显示 为 3 列 */ 
column-count: 3: 


mr 
” 
’ 
J 
一 二 280 . 
” 
” 
” 


/# 定 义 列 间距 为 3am， 默 认为 lem*/ 


column-gap: 3em: 


line-height: 2.Sem: /* 定 义 页 面 文 本 行 高 */ 
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x 


> (HE ht jilocalhost:8080/mysite/test html ”全 CO | 让 |ocalhost ~ ne ee 


W3C 标 准 


W3C 的 各 类 搞 术 标准 在 田力 
为 癌 类 应 用 的 开 愉 打 壬 一 个 开放 
的 Web 平 台 《Open Web 
Platform ) 。 尽 管 这 个 开放 Web 
平台 的 边界 在 不 岂 延 侧 ， 产 业 缠 
认为 HTMLS 将 是 这 个 平台 的 核 
心 ， 平台 的 能 力 将 依 殉 于 W3C 及 
基 合 作 忆 伴 正 在 创建 的 一 笃 囊 


Web 技 术 ， 包 括 CSS. SVG。 
WOFF, 语义 Web ， 及 XML 和 各 
类 应 腾 忆 得 接口 (APIs》: 


蕉 至 2014 年 3 月 ，W3C 世 设 
立 5 个 技术 氢 域 ， 开 展 23 个 标准 
计划 。W3C 设 有 46 个 工作 组 


《Working Group) 、14 个 共 想 小 


钥 【Interest Group? 、 3 个 协调 组 
¢ Coordination Group ) 、169 个 
社区 组 (Community Group》 ， 


以 及 3 个 业务 组 (Business 
Group 。 


旦 前 ，W3C 正 在 探讨 挤 术 志 
社 及 个 人 季 与 W3C 标 惟 制 定 过 程 
的 Webizcn 计 划 ， 茹 请 期 此 。 


W3C 于 2014 年 1] 月 发 布 了 是 
为 ”W3C 工 作 重 点 “2014 年 11 
月 ) "的 报告 ,这 是 吹 新 的 一 苏 
对 WwW3C 近 其 开展 的 工作 要 点 进行 
了 综 计 的 文章 ， 责 壕 了 近期 的 工 
作 重 点 和 优先 级 。 


图 11.3 设计 玖 度 的 跨栏 布局 
11.1.4 ”设置 列 边框 
column-rule 属性 可 以 定义 每 列 之 间 边 框 的 宽度 、 样 式 和 颜色 。 基 本 语法 如 下 : 


column-rale: <'column-rule-width'’> || <'column-rule-style'’> || <'column-rule-color'’> 


取 值 简单 说 明 如 下 。 

<'column-rule-width'>: 设置 对 象 的 列 与 列 之 间 的 边框 厚度 。 
<'column-rule-style>: 设置 对 象 的 列 与 列 之 间 的 边框 样式 。 
<'column-rule-color>: 设置 对 象 的 列 与 列 之 间 的 边框 颜色 。 
column-rule-style 属性 语法 如 下 所 示 ， 取 值 与 边框 样式 border-style 相同 。 


column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | Inset | outset 


column-rule-width 与 border-width、column-rule-color 与 border-color 设置 相同 。 
【示例 】 在 上 面 示例 基础 上 ， 为 每 列 之 间 的 边框 定义 一 个 虚线 分 隔 线 ， 线 宽 为 2px， 灰 色 显 示 ， 
演示 效果 如 图 11.4 所 示 。 
body { 
诺 定 义 页 面 内 容 显 示 为 3 列 */ 
column-count: 3; 
/* 定 义 列 间距 为 3sam， 默 认为 lem*/ 
column-gap: 3em: 
line-height: 2.5em; 
诺 定 义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 
column-rule: dashed 2px gray:; 


11.1.5 ”设置 跨 列 显 示 


column-span 属性 可 以 定义 跨 列 显示 ， 基 本 语法 如 下 : 
column-span: none | all 


一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


“ls 
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% 


- > | 置 http://localhost:S080/rmysiteftest html 


W3C 标 准 


W3C 的 各 类 技术 标准 在 劳力 
为 各 类 应 用 的 开发 打造 一 个 开放 
的 Web 平 台 (Open Web 
Platform ) 。 玉 管 这 个 开 直 Web 
省 的 边 寞 在 个 怕 延 伸 ， 产 业界 
认为 HTML5 将 是 这 个 平台 的 核 
心平 汪 的 能 力 将 恢 核 于 W3C 玉 
富 作 羽 性 正在 创建 的 一 系列 


Web 技 术 ， 包括 CSS, SVG, 
WOFF, 语 光 Web， 及 XML 和 各 
类 应 腾 必 程 按 口 (APIs》。 


堆 王 2014 年 3 月 ，W3C 共 设 
立 5 个 技术 领域 ， 开 展 23 个 标准 
计划 。W3C 设 有 45 沾 工作 组 
《Warking Group) 、14 个 兴起 小 
组 《Interest Group》 、3 个 协调 组 
《Coordination Group 》 、169 个 
社区 组 (Community Group ) ， 


作文 让 


以 及 3 个 业务 组 《Business 
Group，》。 


目前 ，W3C 正 在 探讨 技术 专 
家 及 个 人 委 与 W3C 宁 眶 剂 定 过 程 
的 Webizen 计 划 ， 雍 请 期 待 。 


W3C 于 2014 年 11 月 发 布 了 题 
为 "W3C 工 作 重 点 《2014 年 1 
月 "的 损 吉 ,这 是 最新 的 一 苏 
对 W3C 这 期 开 展 的 工作 要 点 进行 
了 综述 的 冯 台 ， 立 述 了 近 戎 的 工 
作 重 点 和 其 先 级 。 


11.4 设计 列 边框 效果 


取 值 简单 说 明 如 下 。 

none: 不 路 列 。 

all: 横 跨 所 有 列 。 

【示例 】 在 上 面 示例 基础 上 ， 使 用 column-span 属性 定义 一 级 标题 跨 列 显示 ， 演 示 效 果 如 图 11.5 
所 示 。 

body { 
启 定 义 页 面 内 容 显 示 为 3 列 */ 
column-count: 3; 
/# 定 义 列 间距 为 3am， 默 认为 lem*/ 
column-gap: 3em: 
line-height: 2.Sem' 
/# 定 义 列 边框 为 2px 宽 的 灰色 虚线 */ 


hl { 


} 


column-rule: dashed 2px gray;} 
虚设 置 一 级 标题 跨越 所 有 列 显示 */ 


color: #333333; font-size: 20px; text-align: center; 


padding: 12px; 
访 跨 越 所 有 列 显示 */ 


column-span: al]: 


p {color: #333333; font-size: 14px: line-height: 180%;: text-indent: 2em;} 


se (+)- | http://localhost8080/mysiteftest.html -Ec 


W3C 的 各 类 技术 标准 在 努力 
为 各 类 应 用 的 开发 打造 一 个 开放 
的 web 平台 (Open Web 
Platform 》 。 挟 答 这 个 开 庆 Web 
平台 的 边界 在 趟 新 延伸 ， 产 业界 
认为 HTML5 将 是 这 个 平台 的 核 
心 : 平台 的 能 力 将 依 核 于 W3C 及 
其 富 作 快 性 正在 创建 的 一 系列 
Web 技 术 ， 包括 CSS. SVG. 
WOFF. 语 久 Web, 玉 XML 和 各 
类 应 用 编程 接口 ‘APIs》。 


图 11.5 


W3C 标 准 


2014 年 3 月 ，W3C 共 设 
立 5 个 技术 领域 ， 开 展 23 个 标准 
计划 。W3C 设 有 46 个 工作 组 
《Warking Group) 、14 个 兴 下 小 
组 《Interest Group》 、3 个 协调 组 
“Coordination Group 、169 个 
社区 组 (Community Group ) ， 
以 及 3 个 业务 组 《Businass 
Group] 。 


从 友 说 


目前 ，W3C 正 在 探讨 技术 专 
家 及 个 人 苍 与 W3C 标 准 市 定 过 程 
的 Webizen 计 划 ， 赏 请 期 符 。 


W3C 于 2014 年 11 月 发 布 了 可 
为 "W3C 工 作 重 点 《2014 年 11 
月 》 "的 报 吉 ， 这 是 最 新 的 一 从 
对 W3C 近 邯 开 展 的 工作 要 点 进行 
了 综述 的 文章 ， 阁 述 了 近期 的 工 
作 至 点 和 惰 先 级 。 


设计 标题 跨 列 显示 效果 


* 282 。 
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11.1.6 ”设置 列 高 度 
column-fill 属性 可 以 定义 栏目 的 高 度 是 否 统 一 ， 基 本 语法 如 下 : 
column-fill: auto | balance 
取 值 简单 说 明 如 下 。 
auto: 列 高 度 自 适 应 内 容 。 


balance: 所 有 列 的 高 度 以 其 中 最 高 的 一 列 统一 。 
【示例 】 在 上 面 示例 基础 上 ， 使 用 column-fill 属性 定义 每 列 高 度 一 致 。 


body { 
上 # 定 义 页 面 内 容 显示 为 3 列 */ 
column-count: 3; 
/# 定 义 列 间距 为 3am， 默 认为 lem*/ 
column-gap: 3em: 
line-height: 2.Sem' 
/# 定 义 列 边框 为 2px 宽 的 灰色 虚线 */ 
column-rule: dashed 2px gray:; 
此 设置 各 列 高 度 一 致 */ 
column-fill: balance: 


11.2 目 版 伸缩 盒 


Flexbox 〈 伸 缩 盒 ) 是 CSS3 新 增 的 布局 模型 ， 实 际 上 它 一 直 都 存在 。 最 开始 它 作 为 Mozilla XUL ] 
的 一 个 功能 ， 被 用 来 制作 程序 界面 ， 如 Firefox 的 工具 栏 就 多 次 使 用 这 个 属性 。 本 节 将 重点 介绍 旧版 ， 
伸缩 盒 模型 的 基本 用 法 。 


11.2.1 ”局 动 伸缩 盒 
在 旧版 本 中 局 动 伸缩 盒 模型 ， 只 需 设 置 容器 的 display 属性 值 为 box 或 inline-box， 用 法 如 下 : 
display: box; 
display: Inline-box: 
伸缩 盒 模型 由 两 部 分 构成 : 父 容器 和 子 容器 。 父 容器 通过 “display:box;” 或 者 “display:inline-box:” | 
启动 伸缩 盒 布局 功能 。 子 容器 通过 box-flex 属性 定义 布局 宽度 和 如 何 对 父 容 器 的 宽度 进行 分 配 。 
父 容器 又 通过 如 下 属性 定义 包含 容器 的 显示 属性 ， 人 简单 说 明 如 下 。 
box-orient: 定义 父 容器 里 子 容器 的 排列 方式 是 水 平 还 是 和 懂 直 。 
box-direction: 定义 父 容器 里 子 容器 的 排列 顺序 。 
四”box-align: 定义 子 容器 的 冬 直 对 齐 方 式 。 
四”box-pack: 定义 子 容器 的 水 平 对 齐 方 式 。 
<% 信 注意 : 使 用 旧版 本 伸缩 爹 模型 ， 需 要 用 到 各 浏览 器 的 私有 属性 ，Webkit 引擎 支持 -webkit- 前 组 的 
私有 属性 ，Mozilla Gecko 引擎 支持 -moz- 前 缓 的 私有 属性 ，Presto 引擎 ( 包括 Opera 浏览 ， 
器 等 ) 支持 标准 属性 ，IE 暂 不 支持 旧版 本 伸缩 盒 模型 。 


。283。 
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& 


11.2.2 设置 宽度 


在 默认 情况 下 ， 盒 子 没有 弹性 ， 它 将 尽 可 能 宽 地 使 其 内 容 可 见 ， 且 没有 洲 出 ， 其 大 小 由 width、 
”height、min-height、min-width、max-width 或 者 max-height 属性 值 来 决定 。 

使 用 box-flex 属性 可 以 把 默认 布局 变 为 盒 布 局 。 如 果 box-flex 的 属性 值 为 1， 则 元 素 变 得 富有 弹 
性 ， 其 大 小 将 按 下 面 的 方式 计算 : 

加 ”声明 的 大 小 (width、height、min-width、min-height、max-width、max-height )。 

加 ” 父 容 器 的 大 小 和 所 有 余下 的 可 利用 的 内 部 空间 。 

如 果 盒 子 没有 声明 大 小 ,那么 其 大 小 将 完全 取决 于 父 容器 的 大 小 ， 即 盒子 的 大 小 等 于 父 容器 的 大 
”小 乘 以 其 box-flex 在 所 有 盒子 box-flex 总 和 中 的 百分比 ， 用 公式 表示 : 
| 盒子 的 大 小 = 父 容器 的 大 小 x 盒 子 的 box-flex* 所 有 盒子 的 box-flex 值 的 和 
余下 的 盒子 将 按照 上 面 的 原则 分 享 剩 下 的 可 用 空间 。 
【示例 】 下 面 示例 定义 左 侧 边 栏 的 宽度 为 240px， 右 侧 边栏 的 宽度 为 200px， 中 间 内 容 版 块 的 宽 
， 度 将 由 box-flex 属性 确定 。 详 细 代 人 码 如 下 所 示 ， 演 示 效 果 如 图 11.6 所 示 ， 当 调整 窗口 宽度 时 ， 中 间 列 
”的 宽度 会 自 适应 显示 ， 使 整个 页 面 总 是 满 窗口 显示 。 
<style type="text/css"> 
#container { 

此 定义 弹性 盒 布局 样式 */ 

display: -moz-box: 

display: -webkit-box: 


display: box; 
} 
#left-sidebar { 
width: 240px:; 
padding: 20px; 
background-color: orange; 
} 
#contents { 


庶 定 义 中 间 列 宽度 为 自 适应 显示 */ 
-moz-box-flex: 1: 
-webkit-box-flex: 1: 
flex: 1; 
padding: 20px; 
background-color: yellow:; 

} 

#right-sidebar { 
width: 200px: 
padding: 20px:; 
background-color: limegreen: 

} 

#left-sidebar, #contents, #right-sidebar { 
谍 定 义 盒 样式 */ 
-moz-box-sizing: border-box:; 
-webkit-box-sizing: border-box: 


。 I84。 
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box-sizing: border-box:; 
} 
</style> 
<div 1d="container"> 
<div 1d="left-sidebar"> 
<h2> 宋 词 精 选 </h2> 
< 
<]li><a hre 伟 "> 小 算 子 。 咏 梅 </a> 一 /> 
<li><a hre 舍 "> 声 声 慢 。 寻 寻 况 疯 </a></li> 
<li><a hre 仁 "> 雨 霖 铃 。 寒蝉 姜 切 </a></li> 
<]li><a hre 伍 "> 卜 算 子 。 咏 梅 </a></li> 
<]i><a hre 仁 "> 更 多 </a></l> 
</ul> 
</div> 
<dlv 1d="contents"> 
<h1l> 水 调 歌 头 。 明 月 几时 有 </hl> 
<h2> 苏 轼 </h2> 
<p> 丙 搬 中 秋 ， 欢 饮 达 旦 ， 大 醇 ， 作 此 篇 ， 兼 怀 子 由 。</p> 


<p> 明 月 几时 有 ? 把 酒 问 青天 。 不 知 天 上 襄 阐 ,今夕 是 何 年 。 我 僻 乘 风 归 去 ， 又 仙 琼 楼 玉宇 ， 高 处 


不 胜 寒 。 起 舞 弄 清 影 ， 何 似 在 人 间 ? </p> 


<p> 转 朱 阁 ， 低 绮 户 ， 照 无 眠 。 不 应 有 恨 ， 何 事 长 向 别 时 圆 ? 人 有 悲欢离合 ， 月 有 阴 晴 圆 缺 ,此 事 


古 难 全 。 但 愿 人 长 入， 千里 共 婵 娟 。</p> 
</div> 
<div 1d="night-sidebar"> 
<h2> 词 人 列表 </h2> 
<ul> 
<]i><a hre 伍 "> 陆游 </a></li> 
<]i><a hre 住 "> 李清照 </a></li> 
<]i><a hre 伍 "> 苏轼 </a></li> 
<]i><a hre 伍 "> 柳 永 </a></li> 
</ul> 
</div> 
</div> 


DD localhost:3080/mysite! X 


CGC | © localhost:g080/mysite/test1.html 


图 11.6 定义 自 适应 宽度 
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使 用 box-ordinal-group 属性 可 以 改变 子 元 素 的 显示 顺序 ， 语 法 格式 如 下 : 
box-ordinal-group: <integer> 


其 中 ，<integer> 用 整数 值 来 定义 伸缩 盒 对 象 的 子 元 素 显示 顺序 ， 默 认 值 为 1。 浏 览 器 在 显示 时 ， 
”将 根据 该 值 从 小 到 大 来 显示 这 些 元 素 。 
| 【示例 】 以 上 节 示 例 为 基础 ， 在 左 栏 、 中 栏 、 右 栏 中 分 别 加 入 一 个 box-ordinal-group 属性 ， 并 指 

” 定 显示 的 序号 ， 这 里 将 中 栏 设置 为 1， 右 栏 设置 为 2， 左 栏 设 置 为 3， 则 可 以 发 现 3 栏 显示 顺序 发 生 

， 了 变化 ， 演 示 效 果 如 图 11.7 所 示 。 

#left-sidebar { 

-moz-box-ordinal-group: 3; 
] -webkit-box-ordinal-group: 3; 
box-ordinal-group: 3; 


] } 
#contents { 
] -moz-box-ordinal-group: 1]; 
| -webkit-box-ordinal-group: 1; 
| box-ordinal-group: 1; 
| 国 
| #1ight-sidebar { 
-moz-box-ordinal-group: 2; 
] -webkit-box-ordinal-group: 2; 
box-ordinal-group: 2; 
} 


localhost8080/mysitc， X 
Y 


| © localhost:8080/mysite/test1.html 


Rs 图 11.7 定义 列 显示 顺序 
请 11.2.4 ”设置 方向 

使 用 box-orient 可 以 定义 元 素 的 排列 方向 ， 语 法 格式 如 下 : 
box-orient: horizontal | vertical | inline-axis | block-axis 


* 286* 


第 1]] 章 CSS3 伸 闹 金 而 局 -一 C53 | 


取 值 简单 说 明 如 下 。 
加 ”horizontal: 设置 伸缩 盒 对 象 的 子 元 素 从 左 到 右 水 平 排列 。 
回 “vertical: 设置 伸缩 盒 对 象 的 子 元 素 从 上 到 下 纵 回 排列 。 
加 inline-axis: 设置 伸缩 盒 对 象 的 子 元 素 沿 行 轴 排 列 。 | 会 六 
回 blockaxis: 设置 伸缩 盒 对 象 的 子 元 素 沿 块 轴 排 列 。 国志 
【示例 】 针 对 上 面 示例 ， 在 <div id="container"> 标 签 样式 中 加 入 box-orient 属性 ， 并 设 定 属性 值 
为 vertical， 即 定义 内 容 以 垂直 方向 排列 ， 则 代表 左 侧 边 栏 、 中 间 内 容 和 右 侧 边栏 的 3 个 div i 
列 方 回 将 从 水 平方 同 改 变 为 垂直 方向 ， 演 示 效 果 如 图 11.8 所 示 。 
#container { 
启 定 义 弹性 盒 布 局 样式 */ 
display: -moz-box: 
display: -webkit-box: 
display: box; 
诺 定 义 从 上 到 下 排列 显示 */ 
-moz-box-orient: Vertlcal: 
-webkit-box-orient: vertical: 
box-orient: vertical: 


1 localhost8080/mysite, x 


@ © localhost:8080/mysite/test1.htm 


图 11.8 ”定义 列 显示 方 回 
使 用 box-direction 属性 可 以 让 各 个 子 元 素 反 回 排 序 ， 语 法 格式 如 下 : 
box-direction: normal | reverse 


取 值 简单 说 明 如 下 。 
加 ”normal: 设置 伸缩 盒 对 象 的 子 元 素 按 正 营 顺序 排列 。 
回 reverse: 反 转 伸缩 盒 对 象 的 子 元 素 的 排列 顺序 。 


11.2.5 设置 对 齐 万 式 


使 用 box-pack 可 以 设置 子 元 素 水 平方 向 对 齐 方式 ， 语 法 格式 如 下 ; Be 
box-pack: start | center | end | justify 
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取 值 简单 说 明 如 下 。 

start: 设置 伸缩 盒 对 象 的 子 元 素 从 开始 位 置 对 齐 ， 为 默认 值 。 
center: 设置 伸缩 盒 对 象 的 子 元 素 居 中 对 齐 。 

回 end: 设置 伸缩 盒 对 象 的 子 元 素 从 结束 位 置 对 齐 。 

justify: 设置 伸缩 盒 对 象 的 子 元 素 两 器 对 齐 。 

使 用 box-align 可 以 设置 子 元 素 垂直 方 同 对 齐 方式 ， 语 法 格式 如 下 : 
box-align: start | end | center | baseline | stretch 

取 值 简单 说 明 如 下 。 

start: 设置 伸缩 盒 对 象 的 子 元 素 从 开始 位 置 对 齐 。 

center: 设置 伸缩 盒 对 象 的 子 元 素 居中 对 齐 。 

end: 设置 伸缩 盒 对 象 的 子 元 素 从 结束 位 置 对 齐 。 

baseline: 设置 伸缩 盒 对 象 的 子 元 素 基 线 对 齐 。 

stretch: 设置 伸缩 盒 对 象 的 子 元 素 上 自 适 应 父 元 素 尺 寸 。 

【 示例】 在 下 面 示 例 中 有 一 个 <div class="login"> 容 器 ， 其 中 包含 一 个 登录 表单 对 象 ， 为 了 方便 练 


和 办 办 的 


， 习 ， 本 例 使 用 一 个 <img> 标 签 模 拟 ， 然 后 使 用 box-pack 和 box-align 属性 让 表单 对 象 在 <div class="login"> 
”容器 的 正中 央 显 示 。 同 时 ， 设 计 <div class="login"> 容 器 高 度 和 宽度 都 为 100%， 这 样 就 可 以 让 表单 对 
”和 象 在 窗口 中 央 位 置 显示 。 具 体 实现 代码 如 下 ， 设 计 效 果 如 图 11.9 所 示 。 


<style type="text/css"> 

谍 清 除 丰 边 距 */ 

body {margin: 0; padding: 0;} 

div {position: absolute;} 

.bg {i* 设 计 遮 单 层 烛 
width: 100%; helght: 100%; 
background: #000; opacity: 0.7; 

} 

-logm { 
谍 满 屏 显示 */ 
width:100%; height: 100%; 
席 定 义 弹 性 盒 布局 样式 */ 
display: -moz-box;: 
display: -webkit-box:; 
display: box:; 
谍 垂 直 居 中 显示 */ 
-moz-box-align: center; 
-webkit-box-align: center:; 
box-align: center; 
诺 水 平 大 中 显示 */ 
-moz-box-pack: center:; 
-webkit-box-pack: center; 
box-pack: center; 

} 

</style> 

<div class="web"><1img src="i1mages/bg.png" /></div> 

<div class="bg"></div> 

<div class="login"><1img src="i1mages/login.png" /></div> 
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襄 localhosr8080/mysits， x 


GG | 图 Iocalhost'8080/mysite/testhtm 


图 11.9 设计 登录 表单 中 央 显 示 


11.3 新 版 伸缩 盒 


伸缩 盒 模型 是 一 个 新 的 盒子 模型 ， 它 主要 优化 了 UI 布局 ， 可 以 简单 地 使 一 个 元 素 居中 〈 包 括 水 “ 
平和 垂直 居中 )， 可 以 扩大 或 收缩 元 素来 填充 容器 的 可 利用 空间 ， 可 以 改变 布局 顺序 等 。 本 节 将 重点 


介绍 新 版 本 伸缩 盒 模型 的 基本 用 法 。 
11.3.1 认识 Flexbox 系统 
Flexbox 由 伸缩 容器 和 伸缩 项 目 组 成 。 


在 伸缩 容器 中 ,每 一 个 子 元 素 都 是 一 个 伸缩 项 目 ， 伸 缩 项 目 可 以 是 任意 数量 的 ， 伸 缩 容 堪 外 和 伸 | 


缩 项 目 内 的 一 切 元 素 都 不 受 影 啊 。 


伸缩 项 目 治 者 伸缩 容器 内 的 一 个 伸缩 行 定 位 , 通常 每 个 伸缩 容器 只 有 一 个 伸缩 行 。 在 默认 情况 下 ， | 


伸缩 行 和 文本 方向 一致， 从 左 至 右 ， 从 上 到 下 。 


第 规 布局 是 基于 块 和 文本 流 方 向 ， 而 Flex 布局 是 基于 flex-flow 流 。 如 图 11.10 所 示 是 WwW3C 规范 ， 


对 Flex 布局 的 解释 。 


main size 


fiex item sy 


flex container 


Cross size 


凶 
be 
5 

start wp end 
Ed 
DO 


图 11.10 ”Flex 布局 模式 


伸缩 项 目 是 沿 着 主轴 (main axis)， 从 主轴 起 点 (main-start) 到 主轴 终点 (main-end)， 或 者 沿 着 ， 


» 209's 


Cn 


Bie ttn lobe ep de 
加 ”主轴 : 伸缩 容器 的 主轴 , 伸缩 项 目 主要 沿 着 这 条 轴 进 行 排列 布局 。 注 意 ,， 它 不 一 定 是 水 平 的 ， 
这 主要 取决 于 justify-content 属性 设置 。 


加 ”主轴 起 点 和 主轴 终点 : 伸缩 项 目 放 置 在 伸缩 容器 内 ， 从 主轴 起 点 同 主 轴 终 点 方 癌 。 

主轴 尺寸 (main size) : 伸缩 项 目 在 主轴 方 癌 的 宽度 或 高 度 就 是 主轴 的 矿 寸 。 伸 缩 项 目 主要 
的 大 小 属性 要 么 是 宽度 ， 要 么 是 高 度 ， 由 哪 一 个 对 着 主轴 方 同 决定 。 

侧 轴 : 垂直 于 主轴 的 轴 称 为 侧 轴 。 它 的 方 同 主要 取决 于 主轴 方向 。 

回 ” 侧 轴 起 点 和 侧 轴 终点 : 伸缩 行 的 配置 从 容 占 的 侧 轴 起 点 边 开 始 ， 往 侧 轴 终 点 边 结束 。 

回 ” 侧 轴 太 寸 (cross size) : 伸缩 项 目 在 侧 轴 方 向 的 宽度 或 高 度 就 是 项 目的 侧 轴 长 度 ， 伸 缩 项 目 


的 侧 轴 长 度 属性 是 width 或 height 属性 ， 由 哪 一 个 对 着 侧 轴 方向 决定 。 
一 个 伸缩 项 目 就 是 一 个 伸缩 容器 的 子 元 素 ， 伸 缩 容器 中 的 文本 也 被 视 为 一 个 伸缩 项 目 。 伸 缩 项 目 


”中 内 容 与 普通 文本 流 一 样 。 例 如 ， 当 一 个 伸缩 项 目 被 设置 为 浮动 ， 用 户 依 然 可 以 在 这 个 伸缩 项 目 中 放 
| 置 一 个 浮动 元 素 。 


11.3.2 启动 伸缩 人 


通过 设置 元 素 的 display 属性 为 flex 或 inline-flex 可 以 定义 一 个 伸缩 容器 。 设 置 为 flex 的 容器 被 


， 泻 染 为 一 个 块 级 元 素 ， 而 设置 为 inline-flex 的 容器 则 被 演 染 为 一 个 行内 元 素 。 具 体 语法 如 下 : 


display: flex | inline-flex: 
上 面 语 法 定义 伸缩 容器 ， 属 性 值 决 定 容器 是 行内 显示 还 是 块 显 示 ， 它 的 所 有 子 元 素 将 变 成 flex 


”文档 流 ， 被 称 为 伸缩 项 目 。 


此 时 ，CSS 的 columns 属性 在 伸缩 容器 上 没有 效果 ， 同 时 float、clear 和 vertical-align 属性 在 伸缩 
项 目 上 也 没有 效果 。 
【 示例】 下面 示 例 设 计 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 ， 演 示 效 果 如 图 11.11 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex: 
width: S00px; height: 300px:; 
border: solid 1px red: 
} 
.flex-ltem { 
background-color: blue: 
width: 200px: helght: 200px: 
margin: 10px; 
} 
</style> 
<div class="flex-container"> 
<div class"flex-item"> 伸 缩 项 目 1</div> 
<div class="flex-item"> 伸 缩 项 目 2</div> 
<div class="flex-item"> 伸 缩 项 目 3</div> 
<div class="flex-item'"> 伸 缩 项 目 4</div> 
</div> 


ss 


DD Ilocalhost8080/mysite/ x Wn 


GC |@ localhost:8080/mysite/test.html 


图 11.11 定义 伸缩 盒 布 局 


11.3.3 ”设置 主轴 万 同 
使 用 flex-direction 属性 可 以 定义 主轴 方 同 ， 它 适用 于 伸缩 容器 。 具 体 语法 如 下 : 


flex-direction: row | row-reverse | column | column-reverse 


取 值 说 明 如 下 。 

加 ” row: 主轴 与 行内 轴 方 向 作为 默认 的 书写 模式 ， 即 横 同 从 左 到 右 排 列 〈 左 对 齐 )。 
加 ”row-reverse: 对 齐 方 式 与 row 相反。 

加 ”column: 主轴 与 块 轴 方 辐 作为 默认 的 书写 模式 ， 即 纵向 从 上 往 下 排列 ( 顶 对 齐 〉。 
加 ”column-reverse: 对 齐 方 式 与 column 相反 。 


【示例 】 在 13.3.2 节 示 例 基础 上 ， 本 例 设计 一 个 伸缩 容 占 ， 其 中 包含 4 个 伸缩 项 目 ， 然 后 定义 伸 


缩 项 目 从 上 往 下 排列 ， 演 示 效 果 如 图 11.12 所 示 。 


<style type="text/css"> 
.flex-container { 


} 


display: -webkat-flex: 

display: flex: 

-webkit-flex-direction: column: 

flex-direction: column. 

width: S00px:helght: 300px;border: solid 1px red.; 


.flex-item { 


} 


backeround-color: blue; 
width: 200px: height: 200px: 
margin: 10pX: 


</style> 


11.3.4 ”设置 行 数 


flex-wrap 定义 伸缩 容器 是 单行 还 是 多 行 显示 伸缩 项 目 , 侧 轴 的 方向 决定 了 新 行 堆放 的 方向 。 具体 


flex-wrap: nowrap | wrap | wrap-reverse 
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图 11.12 定义 伸缩 项 目 从 上 往 下 布局 


取 值 说 明 如 下 。 

加 ”nowrap: flex 容器 为 单行 。 该 情况 下 flex 子 项 可 能 会 洲 出 容器 。 

加 ”wrap: flex 容器 为 多 行 。 该 情况 下 flex 子 项 流出 的 部 分 会 被 放置 到 新 行 ， 子 项 内 部 会 发 生 断 行 。 

加 ”wrap-reverse: 反 转 wrap 排列 。 

【示例 】 在 上 面 示例 基础 上 ， 下面 示例 设计 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 ， 然 后 定义 伸 
缩 项 目 多 行 排列 ， 演 示 效 果 如 图 11.13 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex: 
-webkit-flex-wrap: wrap; 
flex-wrap: wrap; 
width: S00px: height: 300px;border: solid 1px red:; 
} 
.flex-item { 
background-color: blue; 
width: 200px; height: 200px; 
margin: 10px; 
} 
</style> 


[9 localhost/mysite/test.ht x 了 
,人 I localhost/mysite/test.html 


图 11.13 定义 伸缩 项 目 多 行 布局 


。292。 


定义 伸缩 容器 的 主轴 和 侧 轴 。 其 默认 值 为 row nowrap。 有 具体 语法 如 下 : 


1 


第 ]] 章 CSS3 伸缩 金 市 局 


> 
【补充 】 


flex-flow 属性 是 flex-direction 和 flex-wrap 属性 的 复合 属性 ， 适 用 于 伸缩 容器 。 该 民 性 可 DR | 


flex-flow: <'flex-direction'> || <'flex-wrap'> 会 六 | 
取 值 说 明 如 下 。 
加 ”<'flex-direction'>: 定义 弹性 盒子 元 素 的 排列 方向 。 A 


<'flex-wrap'>: 控制 ex 容器 是 单行 或 者 多 行 。 
-3.5 “设置 对 齐 方式 


， 主 轴 对 齐 | 
WA 具体 语法 如 下 : 
Justify-content: flex-start | flex-end | center | space-between | space-around 


取 值 说 明 如 下 。 

flex-start: 默认 值 ， 伸 缩 项 目 同 一 行 的 起 始 位 置 靠 齐 。 
flex-end: 伸缩 项 目 同 一 行 的 结束 位 置 靠 齐 。 

center: 伸缩 项 目 同 一 行 的 中 间 位 置 靠 齐 。 
space-between: 伸缩 项 目 会 平均 地 分 布 在 行 里 。 第 一 个 伸缩 项 目 在 一 行 中 的 开始 位 置 ， 最 后 
一 个 伸缩 项 目 在 一 行 中 的 终点 位 置 。 

space-around: 伸缩 项 目 会 平均 地 分 布 在 行 里 ， 两 端 保留 一 半 的 空间 。 
上 述 取 值 比较 效果 如 图 11.14 所 示 。 


flex-start flex-end center 


space-between space-around 


图 11.14 主轴 对 齐 示 意图 


一 人 


办 


2. 侧 轴 对 齐 
align-items 定义 伸缩 项 目 在 侧 轴 上 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 有 具体 语法 如 下 : 
align-items: flex-start | flex-end | center | baseline | stretch 


on 

flex-start: 伸缩 项 目 在 侧 轴 起 点 边 的 外 边 距 紧 靠 住 该 行 在 侧 轴 起 始 的 边 。 

flex-end: 伸缩 项 目 在 侧 轴 终 点 边 的 外 边 距 靠 住 该 行 在 侧 轴 终 点 的 边 。 

center: 伸缩 项 目的 外 边 距 盒 在 该 行 的 侧 轴 上 居中 放置 。 

baseline: 伸缩 项 目 根据 它们 的 基线 对 齐 。 

stretch: 默认 值 ， 伸 缩 项 目 拉 伸 填充 整个 伸缩 容器 。 此 值 会 使 项 目的 外 边 距 盒 的 尺寸 在 遵照 
min/max-width/height 属性 的 限制 下 尽 可 能 接近 所 在 行 的 尺寸 。 

上 述 取 值 比较 效果 如 图 11.15 所 示 。 


办 多 的 


vs 
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flex-start flex-end center 


stretch baseline 


11.1$ ” 侧 轴 对 齐 示 意图 


3. 伸缩 行 对 齐 

align-content 定义 伸缩 行 在 伸缩 容器 里 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 类 似 于 伸缩 项 目 在 
主轴 上 使 用 justify-content 属性 ， 但 本 属性 在 只 有 一 行 的 伸缩 容器 上 没有 效果 。 有 具体 语法 如 下 : 

align-content: flex-start | flex-end | center | space-between | space-around | stretch 


取 值 说 明 如 下 。 

flex-start: 各 行 辐 伸 缩 容器 的 起 点 位 置 堆 瑟 。 

flex-end: 各 行 癌 伸缩 容器 的 结束 位 置 堆 登 。 

center: 各 行 回 伸缩 容器 的 中 间 位 置 堆 登 。 

space-between: 各 行 在 伸缩 容器 中 平均 分 布 。 

space-around: 各 行 在 伸缩 容器 中 平均 分 布 ， 在 两 边 各 有 一 半 的 空间 。 
stretch: 默认 值 ， 各 行将 会 伸展 ， 以 占用 剩余 的 空间 。 

上 述 取 值 比较 效果 如 图 11.16 所 示 。 


加 


四 旬 加 印加 


flex-start flex-end center 
space-between space-around stretch 


图 11.16 伸缩 行 对 齐 示 意图 
【 示例】 下 面 示例 以 13.3.4 节 示 例 为 基础 ， 定 义 伸缩 行 在 伸缩 容器 中 居中 显示 ， 演 示 效 果 如 图 11.17 
， 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 


. 294 。 
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display: flex: 

-webkit-flex-wrap: wrap; 

flex-wrap: wrap; | 
-webkit-align-content: center; ] 
align-content: center; | 拓 尘 
width: S00px; helght: 300px:border: solid 1px red: | 一 一 


) 
.flex-item { 


background-color: blue; 
width: 200px: height: 200px: 
margin: 10px: | 


</style> | 


DD locolhost/mysite/testht x 


口 localhost/mysite/test.hti nl 


x 

一 一 一 | 
< 一 | 
ws 一 1 
| 

1 

1 

1 

1 

| 

1 

1 

| 

| 

1 

1 

1 

1 

| 


图 11.17 定义 伸缩 行 大 中 对 齐 
11.3.6 ”设置 伸缩 项 目 


伸缩 项 目 都 有 一 个 主轴 长 度 (Main Size) 和 一 个 侧 轴 长 度 〈Cross Size)。 主 轴 长 度 是 伸缩 项 目 在 ， 
主轴 上 的 尺寸 ， 侧 轴 长 度 是 伸缩 项 目 在 侧 轴 上 的 尺寸 。 一 个 伸缩 项 目的 宽 或 高 取决 于 伸缩 容器 的 轴 ， 
可 能 就 是 它 的 主轴 长 度 或 侧 轴 长 度 。 下 面 属性 适用 于 伸缩 项 目 ， 可 以 调整 伸缩 项 目的 行为 。 | 
1， 显示 位 置 | 
order 属性 可 以 控制 伸缩 项 目 在 伸缩 容器 中 的 显示 顺序 ， 具 体 语 法 如 下 : 
order: <integer> | 
其 中 <integer> 用 整数 值 来 定义 排列 顺序 ， 数 值 小 的 排 在 前 面 。 可 以 为 负 值 。 | 
2. 扩展 空间 / 
flex-grow 可 以 定义 伸缩 项 目的 扩展 能 力 ， 决 定 伸缩 容器 剩余 空间 按 比例 应 扩展 多 少 空间 。 具 体 ， 
语法 如 下 : | 
flex-grow: <number> 


其 中 <number> 用 数值 来 定义 扩展 比率 。 不 允许 为 负 值 ， 默 认 值 为 0。 


“00s 


eR (sss 网页 设计 从 入 门 到 精通 (向 课 精 编 版】 


如 果 所 有 伸缩 项 目的 flex-grow 都 设置 为 1， 那 么 每 个 伸缩 项 目 将 占有 大 小 相等 的 剩余 空间 。 如 


” 果 设 置 其 中 一 个 伸缩 项 目的 flex-grow 为 2， 那 么 这 个 伸缩 项 目 所 占 的 剩余 空间 是 其 他 伸缩 项 目 所 占 
”剩余 空间 的 两 倍 。 


3. 收缩 空间 
flex-shrink 可 以 定义 伸缩 项 目 收缩 的 能 力 ， 与 flex-grow 功能 相反 。 具 体 语 法 如 下 : 
flex-shrink: <number> 
其 中 <number> 用 数值 来 定义 收缩 比率 。 不 允许 为 负 值 ， 默 认 值 为 1。 
4. 伸缩 比率 
flex-basis 可 以 设置 伸缩 基准 值 ， 剩 余 的 空间 按 比 率 进 行 伸缩 。 有 具体 语法 如 下 : 
flex-basis: <length> | <percentage> | auto | content 
取 值 说 明 如 下 。 
<length>: 用 长 度 值 来 定义 宽度 。 不 允许 为 负 值 。 
<percentage>: 用 百分比 来 定义 宽度 。 不 允许 为 负 值 。 
auto: 无 特定 宽度 值 ， 取 决 于 其 他 属性 值 。 
content: 基于 内 容 自 动 计算 宽度 。 
【补充 】 
flex 是 flex-grow、flex-shrink 和 flex-basis 3 个 属性 的 复合 属性 ， 该 属性 适用 于 伸缩 项 目 。 其 中 第 


2 个 和 第 3 个 参数 (flex-shrink 和 flex-basis) 是 可 选 参数 。 默 认 值 为 “0 1 auto”。 具 体 语法 如 下 : 


flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> | 


5。 对 齐 方式 
align-self 用 来 在 单独 的 伸缩 项 目 上 禾 写 默认 的 对 齐 方式 。 具 体 语法 如 下 : 
align-self: auto | flex-start | flex-end | center | baseline | stretch 


属性 值 与 align-items 的 属性 值 相同 。 
【示例 1】 以 上 面 示 例 为 基础 ， 定 义 伸 缩 项 目 在 当前 位 置 癌 右 错 移 一 个 位 置 ， 其 中 第 1 个 项 目 位 


于 第 2 个 项 目的 位 置 ， 第 2 个 项 目 位 于 第 3 个 项 目的 位 置 ， 最 后 一 个 项 目 移 到 第 1 个 项 目的 位 置 ， 演 
， 示 效果 如 图 11.18 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex: 
width: S00px: height: 300px:border: solid 1px red: 


.flex-item {backeground-color: blue: width: 200px: height: 200px: margin: 10px:} 


.flex-item:nth-child(0){ 
-webkit-order: 4: 
order: 4: 

} 

.flex-item:nth-child(1){ 
-webkit-order: 1:; 
order: 1:; 


dns 
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} 

.flex-item:nth-child(2){ 
-webkit-order: 2: 
order: 2: 

} 

.flex-1tem:nth-child(3){ 
-webkit-order: 3: 
order: 3: 

} 

</style> 


【示例 2】“margin: auto:” 在 伸缩 盒 中 具有 强大 的 功能 ， 一 个 设 为 auto 的 margin 会 合并 剩余 的 


空间 ， 可 以 用 来 把 伸缩 项 目 挤 到 其 他 位 置 。 下 面 示例 利用 “margin: auto:” 定 义 包含 的 项 目 居 中 显示 , 效 ， 


果 如 图 11.19 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex; 
width: S00px: height: 300px: border: solid 1px red.; 
} 
.flex-item { 
background-color: blue; width: 200px; height: 200px:; 
margin: auto; 
} 
</style> 
<div class="flex-container"> 
<div class="flex-item"> 伸 缩 项 目 </div> 
</div> 


[localhostfmysiteftesthb x 最 [5 localhostfmysite/fiest1. x 了 


@& | localhost/mysite/test.html 53 1 三 a @ Dlocalhost/mysite/test1.html 


图 11.18 定义 伸缩 项 目 错 位 显示 图 11.19 定义 伸缩 项 目 大 中 显示 


11.4 浏览 器 支持 


在 更 新 到 如 今 相 对 稳定 的 版 本 之 前 , Flexbox 经 过 了 3 次 重大 的 迭代 。 从 2009 年 版 (https://www. 


w3.0rg/TR/2009/WD-css3-flexbox-20090723/)， 到 2011 年 版 (https://www.w3.org/TR/2011/WD-css3- 


0 
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flexbox-20111129/)， 再 到 2014 年 版 (https://www.w3.org/TR/css-flexbox-1/)， 前 后 语法 变化 非常 明显 。 
， 这 几 个 不 同 版 本 的 规范 对 应 不 同 的 实现 ， 需 要 关注 哪些 版 本 ， 取 决 于 需要 文 持 的 浏览 器 。 


“11.4.1 浏览 器 对 Flexbox 的 支持 


首先 明确 : IE9 及 以 下 版 本 不 文 持 Flexbox。 对 于 其 他 浏览 器 (包括 所 有 移动 端 浏 览 器 )， 有 方法 
可 以 享受 Flexbox 的 绝 大 多 数 特性 ， 有 具体 文 持 信息 可 以 访问 http://caniuse.com/ 进 行 查 询 。 
如 果 把 Flexbox 新 语法 、 旧 语法 和 混合 语法 混合 在 一 起 使 用 ， 就 可 以 让 浏览 器 得 到 完美 的 展示 。 


当然， 在 使 用 Flexbox 时 ， 应 该 考虑 不 同 浏览 器 的 私有 属性 ， 如 Chrome 要 添加 前 级 -webkit-，Firefox 
， 要 添加 前 级 -moz- 等 。 


【示例 】 下 面 示例 设置 Flexbox 相关 的 3 个 属性 和 值 。 


.flex { 

display: flex: 

flex: 1: 

Justify-content: space-between:; 
} 


这 里 使 用 了 比较 新 的 语法 。 但 是 ， 要 想 支 持 安 蛙 浏览 器 〈v4 及 以 下 版 本 操作 系统 ) 和 IE10， 最 


” 终 代码 如 下 ; 


.flex { 
display: -webkit-box: 
display: -webkit-flex: 
display: -ms-flexbox: 
display: flex: 
-webkit-box-flex: 1: 
-webkit-flex: 1:; 
-ms-flex: ] : 
flex: 1: 
-webkit-box-pack: justify; 
-webkit-justify-content: space-between; 
-ms-flex-pack: justify: 
Justify-content: space-between: 
} 


这 些 代 码 一 个 都 不 能 少 ， 因 为 每 家 浏览 器 厂商 都 有 自己 的 前 级 。 例 如 ，Microsoft 是 -ms-，WebKit 


， 是 -webkit-，Mozilla 是 -moz-。 于 是 ,每 个 新 特性 要 在 所 有 浏览 器 中 生效 ,就 得 写 好 几 裔 。 首 先是 带 各 
， 家 厂商 前 级 的 ， 最 后 一 行 才 是 W3C 标准 规定 的 。 


这 是 让 Flexbox 跨 浏 览 器 的 唯一 有 效 方式 。 如 今 ， 虽然 厂 商 很 少 再 加 前 经 ， 但 在 可 见 的 未 来 ， 仍 


， 然 需要 前 组 来 保证 茶 些 特性 路 浏览 右 可 用 。 


为 了 避免 这 种 烦琐 的 操作 ， 同 时 还 能 轻松 、 准 确 地 加 上 CSS 前 级 ， 用 户 可 以 使 用 Autoprefixer 
Chttps:/github.comy/postcss/autoprefixer ) 目 动 添加 前 绥 。 这 是 一 个 很 快 、 准 确 而 且 安 装 简便 的 PostCSS 


插件。 


Autoprefixer 针对 各 种 情况 提供 了 很 多 版 本 , 使 用 它 甚 至 不 需要 命令 行 构 建 工 具 (Gulp 或 Grunt)。 


”如 果 使 用 Sublime Text， 有 一 个 版 本 可 以 让 用 户 直 接 在 Command Palette 里 选择 : https://github.com/ 
”sindresorhus/sublime-autoprefixer。 此 外 ， 还 有 针对 Atom、Brackets 和 Visual Studio 的 版 本 。 为 了 节省 
版面， 我 们 在 示例 代码 中 可 能 会 省 略 这 些 烦 琐 的 前 缀 ， 仅 给 出 W3C 标准 用 法 。 


。298 。 
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11.4.2 ”比较 Flexbox 新 旧版 本 


简单 比较 Flexbox 版 本 如 下 。 

轴 ”2009 年 版 本 (旧版 本 ) : display:box;。 

加”2011 年 版 本 (混合 版 本 ) : display:flexbox:。 

四。 2014 年 版 本 (新 版 本 ) : display:flex;。 

下 面具 体 说 明 。 

1. 浏 贤 器 文 持 情况 

各 主流 浏览 器 对 Flexbox 规范 不 同 版 本 的 文 持 情况 如 表 11.1 所 示 。 


表 11.1 浏览 器 对 规范 版 本 的 支持 情况 
规范 版 本 | IE | opera | Fiefox | Chome | Ssafar 
新 版 本 《标准 版 ) 
混合 版 本 cm | 
旧版 本 | 321 m0) | 21Cwebkit) | 3-6Cwebkit) 


2. 开启 Flexbox 
不 同 Flexbox 版 本 定义 一 个 元 素 为 伸缩 容器 的 方法 比较 如 表 11.2 所 示 。 


表 11.2 比较 局 动 Flexbox 


规范 版 本 属性 名 称 块 伸缩 容器 内 联 伸缩 容器 
新 版 本 《标准 版 ) inline-flex 
混合 版 本 inline-flexbox 


旧版 本 8 inline-box 


3. 主轴 对 齐 方式 
不 同 Flexbox 版 本 指定 伸缩 项 目 沿 主轴 对 齐 方式 的 取 值 比较 如 表 11.3 所 示 。 


表 11.3 比较 主轴 对 齐 方 式 


规范 版 本 | 属性 名 称 | stat | center | end | justy | distibute 
新 版 本 《标准 版 ) space-around 


泥 合 版 本 | flexpack | sat | center | end |jwtify | distibute 


旧版 本 boxpack | stat | center | end Jivstify |NA 
会 提示 : 

start: 开始 位 置 。 

center: 中 间 位 置 。 

end: 结束 位 置 。 

justify: 两 端 对 齐 。 

distribute: 均匀 对 齐 。 

N/A: 表示 不 适用 。 


辐 轴 轴 印 辐 辐 
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4. 侧 轴 对 齐 方式 
人 不同 Flexbox 版 本 指定 伸缩 项 目 沿 侧 轴 对 齐 方 式 的 取 值 比较 如 表 11.4 所 示 。 


人 外 | 表 11.4 ”比较 侧 轴 对 齐 方式 
规范 版 本 | 属性 名 称 | start | center | end | baseline | stretch 
Tote Wi Hiren) stretch 
“混合 版 本 flex-alien | stat | center | end | baseline | stetch 
旧版 本 boxalign | start | center | end | baseline | stretch 


会 提示 : 
加”baseline: 基线 对 齐 。 
回 stretch: 伸展 对 齐 。 


5. 单个 伸缩 项 目 侧 轴 对 齐 方式 
不同 Flexbox 版 本 指定 单个 伸缩 项 目 沿 侧 轴 对 章 方式 的 取 值 比较 如 表 11.5 所 示 。 


表 11.5 “比较 单个 伸缩 项 目 侧 轴 对 齐 方式 

规范 版 本 | 属性 名 称 | auto | stat | center | end | baseline | stretch 
新 版 本 (标准 版 ) | alien-self | auto | flexstart | center | flexend | baseline | stretch 
混合 版 本 flex-itemalin | auto | stat | center | end | baseline | stretch 


旧版 本 N/A 
6. 伸缩 项 目 行 对 齐 方 式 
不 同 Flexbox 版 本 指定 伸缩 项 目 行 在 侧 轴 的 对 齐 方式 的 取 值 比较 如 表 11.6 所 示 。 
表 11.6 比较 伸缩 项 目 行 对 齐 方 式 


规范 版 本 | 属性 名 称 | stat |center| end | justy stretch 
新 版 本 (标准 版 ) streteh 
泥 合 版 本 | exlinepack | sart | center | ed | jwstity | distibute | stetch 


旧版 本 N/A 


< 注意 : 只 有 伸缩 项 目 有 多 行 时 才 生 效 ， 这 种 情况 只 有 伸缩 容器 设置 了 flex-wrap 为 wrap， 并 且 没 有 
足够 的 空间 把 伸缩 项 目 放 在 同一 行 中 。 这 些 属 性 将 对 每 一 行 而 不 是 每 一 个 伸缩 项 目 起 作用 。 


7. 显示 顺序 
不 同 Flexbox 版 本 指定 伸缩 项 目的 显示 顺序 的 取 值 比较 如 表 11.7 所 示 。 
表 11.7 比较 显示 顺序 


规范 版 本 属 性 值 
新 版 本 (标准 版 ) <number> 
混合 版 本 <number> 
旧版 本 box-ordinal-eroup <integer> 


* 300 。 
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8. 伸缩 性 
不 同 Flexbox 版 本 指定 伸缩 项 目 如 何 伸缩 尺寸 的 取 值 比较 如 表 11.8 所 示 。 


表 11.8 比较 伸缩 性 


规范 版 本 属性 名 称 属 性 值 


新 版 本 〔 标 准 版 ) none | [ <flex-grow> <flex-shrink>? || <flex-basis> 


混合 版 本 | | none | | | <pos-flex> <neg-flex>? | | <preferred-size> 

旧版 本 pumber> 

flex 属性 在 微软 的 草案 与 新 标准 或 多 或 少 不 一 样 ， 主 要 异同 在 于 : 它们 都 转换 成 标准 缩写 版 本 ， 
属性 值 为 flex-grow、flex-shrink 和 flex-basis， 值 使 用 相同 的 方式 速记 。 然 而 ，flex-shrink〔 以 前 称 为 


负 flex) 的 默认 值 为 1， 这 意味 看 伸缩 项 目 默 认 不 能 收缩 。 以 前 ， 空 间 不 足 使 用 flex-shrink 比例 来 收 


缩 伸缩 项 目 ， 但 现在 可 以 在 flex-basis 的 基础 上 配合 flex-shrink 来 收缩 伸缩 项 目 。 
9. 伸缩 流 
不 同 Flexbox 版 本 指定 伸缩 容器 主轴 的 伸缩 流 方 回 比较 如 表 11.9 所 示 。 
表 11.9 比较 伸缩 流 


规范 版 本 属性 名 称 Horizontal | Reversed horizontal Reversed vertical 


新 版 本 (标准 版 ) | flex-direction | row | toweverse | column | column-reverse 


混合 版 本 flex-direction row-reverse column column-reverse 


OW 
旧版 本 box-orlent horizontal horizontal vertical vertical 
box-direction normal reverse normal reverse 


在 旧版 本 规范 中 ， 将 box-direction 属性 设置 为 reverse 和 在 新 版 本 中 设置 为 row-reverse 或 column- | 
reverse 得 到 的 效果 相同 。 如 果 想 要 的 效果 是 row 或 column， 可 以 省 略 不 设置 ， 因 为 normal 是 默认 的 


初始 值 。 


当 设 置 direction 为 reverse 时 ， 主 轴 和 翻转。 例如 ， 当 使 用 ltr 书写 模式 指定 row-reverse 时 ， 所 有 伸 | 
缩 项 目 会 从 右 回 左 排列 。 类 似 的 ，column-reverse 将 会 使 所 有 伸缩 项 目 从 下 同上 排列 ， 来 代替 从 上 往 ， 


下 排列 。 


10. 换行 
不 同 Flexbox 版 本 指定 伸缩 项 目 是 否 沿 着 侧 轴 排列 的 比较 如 表 11.10 所 示 。 


表 11.10 ”比较 换行 


规范 版 本 Reversed wraf 
新 版 本 (标准 版 ) flex-wrap | nowap | wap | wrapreverse 
混合 版 本 flexwap | nwmp | wap | wapreverse 
旧版 本 boxlines | singe | mlipe | NA 


wrap-reverse 让 伸缩 项 目 在 侧 轴 上 进行 start 和 end 翻转 ， 所 以 ， 如 果 伸 缩 项 目 是 水 平 排列 ， 不 会 ， 
翻转 到 一 个 新 的 线 下 面 ， 而 是 翻转 到 一 个 新 的 线 上 面 。 简 单 理解 就 是 伸缩 项 目 只 是 上 下 或 前 后 翻转 顺序 。 | 
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在 旧版 本 中 ， 需 要 使 用 box-orient 来 设置 书写 模式 的 方向 。 当 使 用 ltr 模式 时 ，horizontal 可 用 在 | 
inline-axis，vertical 可 用 在 block-axis。 如 果 使 用 的 是 一 个 目 上 而 下 的 书写 模式 ， 如 东亚 传统 的 书写 模 ， 


11.5 案例 实战 


下 面 通过 多 个 案例 演示 弹性 布局 的 不 同 应 用 样式 。 
11.5.1 设计 3 栏 页 面 


本 案例 根据 11.4 节 介 绍 的 方法 ， 使 用 不 同 版 本 语法 ， 设 计 一 个 兼容 不 同 设备 和 浏览 器 的 弹性 页 
面 ， 演 示 效 果 如 图 11.20 所 示 。 


0 (+) -| 古 htpy/leocalhost8080/rmysitertestheml ~ 虽 td 省 友 区 


水 调 歌 头 明月 几时 有 


苏轼 Mn 
了 下 。 荐 镁 
构 永 . 


两 展 中 赦 ， 欢 馈 达 旦 ， 克 醉人 必 此 篇 ， 兼 怀 子 由 。 

明月 几时 有 ? 把 酒 则 青天。 不知 天 上 富 阅 ， 今 夕 是 何 年 。 我 浴 

ee 又 向 琼 楼 玉宇 ， 高 处 不 胜 塞 。 起 三 弄 洁 史 ， 何 羽 在 
9 


转让 同 ， 民 茶 尸 ， 妥 无 申 。 不 应 有 恨 ， 何 事 长 向 别 时 同 守 人 有 
月 有 阴暗 回 缺 ， 此 事 古 蕉 全 。 但 原 人 长 义 , 干 里 共 
目 。 


图 11.20 定义 混合 伸缩 盒 布 局 


案例 主要 代码 如 下 : 

<style type="text/css"> 

Page-wrap { 
display: -webkit-box: /#2009 版 - 10S 6-, Safari 3.1-6*/ 
display: -moz-box: /#2009 版 - Firefox 19-( 存 在 缺陷 〉*/ 
display: -ms-flexbox: /#2011 版 -IE 10*/ 
display: -webkit-flex: 人/# 最 新 版 - Chrome*/ 
display: flex: /# 最 新 版 - Opera 12.1, Firefox 20+*/ 

} 


.main-content { 
-webkit-box-ordinal-group: 2:; /#2009 版 - 10S 6-, Safari 3.1-6*/ 


-moz-box-ordinal-group: 2; 计 2009 版 - Firefox 19-*/ 
] -ms-flex-order: 2: /*2011 版 -IE 10*/ 
| -webkit-order: 2: /最 新 版 - Chrome*/ 
| order: 2; /# 最 新 版 - Opera 12.1, Firefox 20+*/ 
| width: 60%: 放 不 会 自动 伸缩 ， 其 他 列 将 占据 空间 */ 
| -moz-box-flex: 1: /# 如 果 没 有 该 声明 ， 主 内 容 (60%) 会 伸展 到 和 最 宽 的 段落 ， 就 像 是 
段落 设置 了 white-space:nowrap*/ 
background: white: 
上 
| .main-nav { 
] -webkit-box-ordinal-group: 1:; /#2009 版 - 10S 6-, Safari 3.1-6*/ 
-moz-box-ordinal-group: 1; /##2009 版 - Firefox 19-*/ 
-ms-flex-order: 1; /*#2011 版 -IE 10*/ 
] -webkit-order: 1: /# 最 新 版 - Chrome*/ 


* JU2。 


第 1] 1] 章 CSS3 伸缩 金 布 局 -一 Sr 


order: ] : 
-webkit-box-flex: 1: 
-moz-box-flex: 1: 
width: 20%: 
-webkit-flex: 1: 
-ms-flex: 1: 

flex: 1; 
background: #cece;: 

} 

.main-sidebar { 
-webkit-box-ordinal-group: 3; 
-moz-box-ordinal-group: 3; 
-ms-flex-order: 3; 
-webkit-order: 3: 
order: 3: 
-webkit-box-flex: 1: 
-moz-box-flex: 1: 
width: 20%: 
-ms-flex: ] : 
-webkit-flex: 1: 
flex: 1: 
background: #cece; 

} 


/# 最 新 版 - Opera 12.1, Firefox 20+*/ 
/#2009 版 - 10S 6-, Safari 3.1-6*/ 
/#2009 版 - Firefox 19-*/ 

/#2009 版 语法 ， 否 则 将 崩 汝 */ 
/*Chrome*/ 

I TD 

谍 最 新 版 - Opera 12.1, Firefox 20+*/ 


/*2009 版 - 10S 6-, Safari 3.1-6*/ 
/#*2009 版 - Firefox 19-*/ 

/2011 版 -IE 10#/ 

谍 最 新 版 - Chrome*/ 

/* 最 新 版 - Opera 12.1, Firefox 20+*/ 
/*2009 版 - 10S 6-, Safari 3.1-6*/ 
/*Firefox 19-*/ 

/#2009 版 ， 否 则 将 月 演 */ 

/#*2011 版 - IE 10*/ 

/最 新 版 - Chrome*/ 

/# 最 新 版 - Opera 12.1, Firefox 20+*/ 


.main-content, .main-sidebar, .main-nav {padding: lem:;} 
body {padding: 2em:; background: #79a693:} 
六 
{ 
-webkit-box-sizing: border-box: 
-moz-box-sizing: border-box:; 
box-sizing: border-box:} 
hl,h2 { 
font: bold 2em Sans-Serif: 
margin: 0 0 lem 0;} 
h2 {font-size: 1.Sem:} 
p {margin: 0 0 lem 0:} 
</style> 
<div class="page-wrap"> 
<section class="main-content"> 


<h1> 水 调 歌 涉 。 明 月 几时 有 </hl> 


</section> 
<nav class="main-nav"> 
<h2> 宋 词 精 选 </h2> 


</nav> 
<aside class="main-sidebar"> 
<h2> 词 人 列表 </h2> 


</aside> 
</div> 


页 面 被 包 了 早 在 类 名 为 page-wrap 的 容器 中 ， 容 器 包含 3 个 子 模块 。 现 在 将 容器 定义 为 伸缩 容器 ， 
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此 时 每 个 子 模块 目 动 变 成 了 伸缩 项 目 。 


<div class="page-wrap"> 
<section class="main-content"> </section> 
<nav class="main-nav"></nav> 
<aslde class="main-sidebar"></aside> 
</div> 
本 例 设 计 各 列 在 一 个 伸缩 容器 中 显示 上 下 文 ， 只 有 这 样 这 些 元 素 才 能 直接 成 为 伸缩 项 目 ,， 它 们 之 


前 是 什么 没有 关系 ， 只 要 现在 是 伸缩 项 目 即 可 。 


本 例 把 Flexbox 的 旧 语 法 、 混 合 语法 和 最 新 的 语法 混在 一 起 使 用 ， 它 们 的 顺序 很 重要 。display 属 


”性 本 身 并 不 添加 任何 浏览 器 前 级 ， 用 户 需要 确保 旧 语 法 不 要 覆盖 新 语法 ， 让 浏览 器 同时 支持 。 


.page-wrap { 


display: -webkit-box: /#2009 版 - 10S 6-, Safari 3.1-6*/ 
display: -moz-box: /*2009 版 - Firefox 19-〈( 存 在 缺陷 〉*/ 
display: -ms-flexbox: /#2011 版 -IE 10*/ 
display: -webkit-flex: 谍 最 新 版 - Chrome*/ 
display: flex: 人/# 最 新 版 - Opera 12.1, Firefox 20+*/ 

} 


整个 页 面包 含 3 列 ， 设 计 一 个 20%、60%、20% 网 格 布局 。 首 先 ， 设 置 主 内 容 区 域 宽度 为 60%; 


”然后 ， 设 置 侧 边栏 来 填补 剩余 的 空间 。 同 样 把 新 旧 语 法 混在 一 起 使 用 ;: 


.main-content { 
-webkit-box-ordinal-group: 2: /#2009 版 - 10S 6-, Safari 3.1-6*/ 


-moz-box-ordinal-group: 2; /#2009 版 - Firefox 19-*/ 
-ms-flex-order: 2: /#*2011 版 - IE 10*/ 

-webkit-order: 2: /# 最 新 版 - Chrome*/ 

order: 2: /# 最 新 版 - Opera 12.1, Firefox 20+*/ 
width: 60%;: 记 不 会 自动 伸缩 ， 其 他 列 将 占据 空间 */ 


人/# 如 果 没 有 该 声明 ，Firefox 19- 将 溢出 h， 窗 六 宽度 */ 


-moz-box-flex: ] : 
background: white: 
} 
在 新 语法 中 ， 没 有 必要 给 边栏 设置 宽度 ， 因 为 它们 同样 会 使 用 20% 比 例 填充 剩余 的 40% 空 间 。 


但是， 如果 不 显 式 地 设置 宽度 ， 在 旧 语法 下 会 直接 骨 溃 。 


完成 初步 布局 之 后 ， 需 要 重新 编排 列 的 顺序 。 这 里 设计 主 内 容 排列 在 中 间 ， 但 在 源码 之 中 ， 它 排 在 
第 一 的 位 置 。 使 用 Flexbox 可 以 非 营 容易 实现 ， 但 是 用 户 需 要 把 Flexbox 几 种 不 同 的 语法 混在 一 起 使 用 : 


.main-content { 
-webkit-box-ordinal-group: 2; 
-moz-box-ordinal-group: 2; 
-ms-flex-order: 2: 
-webkit-order: 2: 
order: 2: 

: 

.main-nav { 
-webkit-box-ordinal-group: 1:; 
-moz-box-ordinal-group: 1:; 
-ms-flex-order: 1: 


-webkit-order: 1: 
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order: ] : 


.main-sidebar { 
-webkit-box-ordinal-group: 3; 
-moz-box-ordinal-group: 3; 
-ms-flex-order: 3: 
-webkit-order: 3: 
order: 3: 


11.5.2 设计 3 人行 3 列 应 用 


本 例 借助 Flexbox 伸缩 盒 布 局 ， 设 计 页 面 呈现 3 行 3 列 布局 样式 ， 同 时 能 够 根据 窗口 自 适 应 调整 
各 自 空间 ， 以 满 屏 显 示 ， 效 果 如 图 11.21 所 示 。 


门 localhost/mysite/test.ht! xx 
@ localhost/mysite/test.html 


Article 


图 11.21 3 行 3 列 布局 样式 
页 面 主 要 代码 如 下 : 


<style type="text/css"> 

性 基 本 样式 */ 

* {margin: 0; padding: 0; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box: 
box-sizing: border-box:; 

} 

html, body {height: 100%:; color: #fff:} 

body {min-width: 100%:;} 

header, section, nav, aside, footer {display: block; text-align:center; font-size:2em:; font-welght:bold:} 

/# 页 眉 框 样式 : 限 高 、 限 宽 */ 

header { 
background-color: hsla(200,10%,70%,.5); 
min-height: 100px: padding: 10px 20px:; 
min-width: 100%: 


} 
人 # 主 体 区 域 框 样式 : 满 宽 显示 */ 
section {min-width: 100%:} 
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人/# 导 航 框 样式 : 固定 宽度 */ 
nav {background-color: hsla(300,60%,20%,.9):padding: 1%:;width: 220px:} 
放 文 档 栏 样式 */ 
article {backeround-color: hsla(120,50%,50%,.9):; padding: 1%:} 
Ey | 谍 侧 边栏 样式 : 弹性 宽度 */ 
NED aside {background-color: hsla(20,80%,80%..9); padding: 1%:;width: 220px:} 


vote /# 页 脚 样式 ; 限 高 、 限 宽 */ 
| footer { 


background-color: hsla(250,50%,80%,.9); 
min-height: 60px; padding: 1%: 
min-width: 100%: 


} 
/*flexbox 样式 */ 
body { 
诺 设 置 body 为 伸缩 容器 */ 
display: -webkit-box: 谍 旧 版 本 : 1OS 6-, Safari 3.1-6*/ 
display: -moz-box: 谍 旧 版 本 : Firefox 19-*/ 
display: -ms-flexbox: /# 混 合 版 本 : IE10*/ 
display: -webkit-flex: 谍 新 版 本 : Chrome*/ 
display: flex; /# 标 准 规范 : Opera 12.1, Firefox 20+*/ 
/伸缩 项 目 换行 妆 


-moz-box-orient: vertical: 
-webkit-box-orient: vertical: 
-moz-box-direction: normal; 
-moz-box-direction: normal; 
-moz-box-lines: multiple: 
-webkit-box-lines: multiple; 
-webkit-flex-flow: column wrap; 
-ms-flex-flow: column wrap: 
flex-flow: column wrap: 


} 

/# 实 现 stick footer 效果 */ 

section { 
display: -moz-box: 
display: -webkit-box: 
display: -ms-flexbox: 
display: -webkit-flex; 
display: flex; 
-webkit-box-flex: 1: 
-moz-box-flex: 1: 
-ms-flex: 1: 
-webkit-flex: 1:; 
flex: 1: 
-moz-box-orient: horlzontal: 
-webkit-box-orient: horizontal: 
-moz-box-direction: normal; 
-webkit-box-direction: normal:; 
-moz-box-lines: multiple: 
-webkit-box-lines: multiple; 
-ms-flex-flow: row wrap; 
-webkit-flex-flow: row wrap:; 
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11.6 在 线 练 习 


Flexbox 3 个 不 同 版 本 的 规范 对 应 着 不 同 的 实现 。 需 要 关注 哪个 版 本 ， 取 决 于 需要 支持 的 浏览 器 。 
详细 说 明 请 扫 码 阅读 。 a 
Ee 
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设计 CSS3 用 户 寞 面 桩 式 


2015 年 4 月 , W3C 的 CSS 工作 组 发 布 CSS 基本 用 户 接 口 模块 (CSS Basic User Interface 
Module Level 3，CSS3 UI) 的 标准 工作 草案 ， 该 文档 描述 了 CSS3 中 对 HIML、XML 进行 
样式 处 理 所 需 的 与 用 户 界 面相 关 的 CSS 选择 器 、 属 性 及 属性 值 。CSS3 VI 模 块 负责 控制 与 用 
户 接口 界面 相关 效果 的 呈现 方式 ， 它 包含 并 扩展 了 在 CSS2 和 Selector 规范 中 定义 的 与 用 户 
接口 有 关 的 特性 ， 

权威 和 参考: http://www.w3.org/TR/css-ui-3/。 


【 学 习 重 点 】 

中 了 解 常 用 界面 显示 属性 。 
WV 能够 定 义 轮廓 样式 。 

WB 正确 设计 边框 图 像样 式 ， 
W|I 灵活 设计 圆 角 样式 。 

WI 灵活 设计 阴影 样式 。 
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12.1] 杀 面 显示 


下 面 介 绍 CSS3 用 户 界 面 的 显示 方式 、 显 示 大 小 和 洲 出 处 理 问题 。 
12.1.1 显示 万 式 


一 般 浏 览 器 都 文 持 两 种 显示 模式 : 怪异 模式 和 标准 模式 。 在 怪异 模式 下 ，border 和 padding 包含 
在 width 或 height 之 内 ; 在 标准 模式 下 ，border、padding、width 或 height 是 各 自 独立 区 域 。 
为 了 兼顾 这 两 种 解析 模式 ，CSS3 定义 了 box-sizing 属性 ， 该 属性 能 够 定义 对 象 尺 寸 的 解析 方式 。 
box-sizing 属性 的 基本 语法 如 下 : 
box-sizing: content-box | border-box: 
取 值 简单 说 明 如 下 。 
content-box: 为 默认 值 ，padding 和 border 不 被 包含 在 定义 的 width 和 height 之 内 。 对 象 的 实际 
宽度 等 于 设置 的 width 值 和 border、padding 之 和 ， 即 元 素 的 宽度 = width + border + padding。 
加 ”border-box: padding 和 border 被 包含 在 定义 的 width 和 height 之 内 。 对 象 的 实际 宽度 就 等 于 设 
置 的 width 值 , 即使 定义 有 border 和 padding 也 不 会 改变 对 象 的 实际 宽度 , 即 元 素 的 宽度 = width。 
【示例 】 下 面 示 例 设计 两 个 相同 样式 的 盒子 , 在 怪异 模式 和 标准 模式 下 的 显示 效果 如 图 12.1 所 示 。 


<style type= "text/css"> 

div { 
float: left: /# 浮 动 显示 部/ 
height: 100px: 谍 元 素 的 高 度 */ 
width: 100px: /# 元 素 的 宽度 #/ 
border: 50px solid red: 话 边 框 */ 
margin: 10px: 诺 外 边 距 */ 
padding: S0px: 诬 内 边 距 */ 


} 

.border-box {box-sizing: border-box;} ”/* 怪 异 模式 解析 */ 
</style> 

<div> 标 准 模式 </div> 

<div class="border-box"> 怪 异 模 式 </div> 


ce >= 由 -| 夸 http://localhost:8080/m ~ 昌 地 


图 12.1 标准 模式 和 怪异 模式 解析 比较 
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从 图 12.1 可 以 看 到 ,在 怪异 模式 下 width 属性 值 就 是 指 元 素 的 实际 宽度 ， 即 width 属性 值 中 包含 
，padding 和 border 属性 值 。 


12.1.2 调整 尺寸 


为 了 增强 用 户 体验 ，CSS3 增加 了 resize 属性 ， 人 允许 用 户 通 过 拖 动 的 方式 改变 元 素 的 尺寸 。resize 
EZ 属性 的 基本 语法 如 下 : 


resize:none | both | horizontal | vertical: 
取 值 简单 说 明 如 下 。 
加 ”none: 为 默认 值 ， 不 允许 用 户 调整 元 素 大 小 。 
困 both: 用 户 可 以 调节 元 素 的 宽度 和 高 度 。 
回 “horizontal: 用 户 可 以 调节 元 素 的 宽度 。 
vertical: 用 户 可 以 调节 元 素 的 高 度 。 
目前 除了 正 浏览 器 外 ， 其 他 主流 浏览 器 都 基本 支持 该 属性 。 
【 示例】 下 面 示 例 演 示 如 何 使 用 resize 属性 设计 可 以 自由 调整 大 小 的 图 片 ， 如 图 12.2 所 示 。 
<style type="text/css"> 
#resize { 
/# 以 背景 方式 显示 图 像 ， 这 样 可 以 更 轻松 地 控制 缩放 操作 头 
background:url(1mages/]1.jpg) no-Tepeat center; 


谍 设 计 背 景 图 像 仅 在 内 容 区 域 显示 ， 留 出 补 日 区 域 */ 
backsground-cllip:content: 
谍 设 计 元 素 最 小 和 最 大 显示 尺寸 ， 用 户 也 只 能 够 在 该 范围 内 自由 调整 */ 
width:200px;: helght:120px: 
max-width:800px; max-height:600px:; 
padding:6px; border: 1px solid red: 
话 必 须 同时 定义 overflow 和 resize， 人 否则 resize 属性 声明 无 效 ， 元 素 默 认 游 出 显示 为 visible*/ 
resize: both: 
overflow: auto: 


} 
</style> 


<div 1d="resize"></div> 


BB localhost:BOBO/mysite, x 


DB localhost:B08O/mysite, x 
G | © localhost:8080/mysite/test.html 


| 


默认 大 小 鼠标 拖 动 放大 
图 12.2 调节 元 素 尺寸 
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12.1.3 ”缩放 比例 


zoom 是 下 的 专 有 属性 ， 用 于 设置 对 象 的 缩放 比例 ， 另 外 它 还 可 以 触发 正 的 haslayout 属性 ， 只 
有 清除 浮动 和 margin 重合 等 作用 ， 设 计 师 常用 这 个 属性 解决 正 浏览 器 存在 的 布局 Bug。 


CSS3 文 持 该 属性 ， 基 本 语法 如 下 : 
zoom: normal | <number> | <percentage> 


取 值 说 明 如 下 。 
normal: 使 用 对 象 的 实际 尺寸 。 
<number>: 用 浮 点 数 来 定义 缩放 比例 ， 不 允许 为 负 值 。 
<percentage>: 用 百分比 来 定义 缩放 比例 ， 不 允许 为 负 值 。 
目前 ， 除 了 Firefox 浏 贤 器 之 外 ， 所 有 主流 浏览 右 部 文 持 该 属性 。 
【示例 】 下 面 示例 使 用 zoom 放大 第 2 幅 图 片 为 原来 的 2 倍 ， 比 较 效果 如 图 12.3 所 示 。 
<style type="text/css"> 
img { 
height: 200px:; 
margin-right: 6px:; 
} 
1mg.Zzoom {zoom: 2:} 
</style> 
<img src="1mages/bg.jpg"/> 
<1mg class="Zzoom" src="i1mages/bg.jpg"/> 


图 12.3 ”放大 图 片 显 示 尺 寸 


当 zoom 属性 值 为 1.0 或 100% 时 ， 相 当 于 normal， 表 示 不 缩放 。 小 于 1 的 正 数 ， 表 示 缩 小 ， 如 
“zoom: 0.3;” 表 示 缩 小 为 原来 的 二 分 之 一 。 


12.2 轮廓 样式 


轮廓 与 边框 不 同 ， 它 不 占用 空间 ， 且 不 一 定 是 矩形 。 轮廓 属于 动态 样式 ， 只 有 当 对 象 区 取信 点 或 
者 被 激活 时 呈现 ， 如 按钮 、 活 动 窗 体 域 、 图 形 地 图 等 周围 添加 一 圈 轮 廓 线 ， 使 对 象 突出 显示 。 
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12.2.1 定义 轮廓 


| outline 属性 可 以 定义 块 元 素 的 轮廓 线 ， 该 属性 在 CSS2.1 规范 中 已 被 明确 定义 ， 但 是 并 未 得 到 各 
”主流 浏览 器 的 三 泛 支持 ，CSS3 增强 了 该 特性 。outline 属性 的 基本 语法 如 下 : 


Note | outline: <'outline-width'> || <'outline-style'’> || <'outline-color'> || <'outline-offset'> 
| 取 值 简单 说 明 如 下 。 
加” <'outline-width'>: 指定 轮廓 边框 的 宽度 。 


<'outline-style>: 指定 轮廓 边框 的 样式 。 
<'outline-color>: 指定 轮廓 边框 的 颜色 。 
<'outline-offset>: 指定 轮廓 边框 的 偏 移 值 。 


< 注意 : outline 创建 的 轮廓 线 是 画 在 一 个 框 “ 上 面 ”， 也 就 是 说 ， 轮 廊 线 总 是 在 顶 上 ， 不 会 影响 该 框 

] 或 任何 其 他 框 的 尺寸 。 因 此 ， 显 示 或 不 显示 轮廓 线 不 会 影响 文档 流 ， 也 不 会 破坏 网 页 布局 。 
轮廓 线 可 能 是 非 和 矩形 的 。 例 如 ， 如 果 元 素 被 分 割 在 好 几 行 ， 那么 轮廓 线 就 至 少 是 能 要 包含 该 
元 素 所 有 框 的 外 慷 。 和 边框 不 同 的 是 ， 外 廓 在 线 框 的 起 止 都 不 是 开放 的 ， 它 总 是 完全 闭合 的 。 

| 【示例 】 下 面 示 例 设 计 当 文本 框 获得 焦点 时 ， 在 周围 男 一 个 粗 实 线 外 廓 ， 提 醒 用 户 交 互 效果 ， 效 

， 宁 如 图 12.4 所 示 。 

<style type="text/css"> 

访 统 一 页 面 字体 和 大 小 */ 

body { 


font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arlal, Helvetica, sans-serif; 
font-size:12px; 


四 加 加 


} 
人 # 清 除 常用 元 素 的 边界 、 补 白 、 边 框 默认 样式 所 
p; hl, form, button {border:0; margin:0; paddimg:0:} 
谨 定 义 一 个 强制 换行 显示 类 */ 
.spacer {clear:both: helght:1px:} 
访 定 义 表 单 外 框 样式 */ 
.myform {margin:0 auto: width:400px: padding: 14px:} 
谍 定 制 当前 表单 样式 */ 
#stylized {border:solid 2px #b7ddf2:; background:#ebf4fb:} 
从 设计 表单 内 div 和 p 通用 样式 效果 */ 
#stylized hl {font-size:14px;: font-weight:bold:margin-bottom:8px:} 
#stylizedp { 
font-slze:11px: color:#666666; 
margin-bottom:20px; padding-bottom: 1 0px; 
border-bottom:solid lpx #b7ddf2:; 


} 

#stylized label {/* 定 义 表单 标 签 样式 */ 
display:block: width: 140px: 
font-welght:bold: text-align:right: 
float:left: 


} 
诺 定 义 小 字体 样式 类 */ 
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#stylized .small { 
color:#666666; font-size:11px; font-weight:normal; text-align:right:; 
display:block: width: 140px: 


} 
放 统 一 输入 文本 框 样式 */ 
#stylized Input { 
float:left: 
font-size:12px:; 
padding:4px 2px; margin:2px 0 20px 10px:; 
border:solid 1px #aacfe4:; width:200px:; 


} 
谍 定 义 图 形 化 按钮 样式 */ 
#stylized button { 
clear:both: 
margin-left: 1 SOpx; 
width:125px; height:3 1px: 
background:#666666 url(i1mages/button.png) no-repeat: 
text-align:center; line-height:3 1px; color:#FFFFFF:; font-slze:11px: font-weight:bold: 


} 
虚设 计 表单 内 文本 框 和 按钮 在 被 激活 和 获取 焦点 状态 下 时 ， 轮 廓 线 的 宽 、 样 式 和 颜色 */ 
input:focus, button:focus {outline: thick solid #b7ddf2} 
input:active, button:active {outline: thick solid #aaa} 
</style> 
<div 1d="stylized" class="myform"> 
<form 1d="form]1" name="form]1" method="post" action=""> 
<h1> 登 录 </h1> 
<p> 请 准确 填写 个 人 信息 ...</p> 
<label>Name <span class="small"> 姓 名 </span> </label> 
<Input type="text" name="textfield" 1d="textfield" /> 
<]label>Email <span class="small"> 电 子 邮 箱 </span> </label> 
<Inpnut type="text" name="textfield" 1d="textfield" /> 
<label>Password <span class="small"> 密 码 </span> </label> 
<Inpnut type="text" name="textfield" 1d="textfield" /> 
<button ” type="submit"> 登 录 </button> 
<div class="spacer"></div> 
</form> 
</div> 


门 necslho<h mysira/spcthr x 
© [localhost/mysite/test.html vr| 必 © [localhost/mysite/test.html 


登录 
洁 准 确 牛 与 个 作 皮 启 
Name 
社 驾 
Ema=i 
韦 , 子 由 | 科 
Password 


宇 租 


登录 
告 准确 描 与 个 信 信和 启 
Name 
六 加 


Emz=il 
不 , 子 由 | 和 


Password 


图 12.4 设计 文本 框 的 轮廓 线 
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12.2.2 设计 轮廓 线 


CSS3 为 轮廓 定义 了 很 多 属性 ， 使 用 这 些 属性 可 以 设计 轮廓 线 样式 。 
1. 设置 宽度 


Jote outline-width 属性 可 以 设置 轮廓 线 的 宽度 。 基 本 语法 如 下 : 


outline-width: <length> | thin | medium | thick 

取 值 简单 说 明 如 下 。 

<length>: 定义 轮廓 粗细 的 值 。 

回 thin: 定义 细 轮 廓 。 

medium: 定义 中 等 的 轮廓 ， 为 默认 值 。 
回 thick: 定义 粗 的 轮廓 。 


< 入 注意 : 只 有 当 轮 廊 样 式 不 是 none 时 ， 该 属性 才 会 起 作用 。 如 果 样 式 为 none， 宽 度 实 际 上 会 重 置 
为 0。 不 允许 设置 为 负 值 。 


2. 设置 样式 

outline-style 属性 可 以 设置 轮廓 线 的 样式 。 基 本 语法 如 下 : 
outline-style: none | dotted | dashed | solid | double | groove | ridge | Inset | outset 
取 值 简单 说 明 如 下 。 

VY none: 无 轮廓 ， 为 默认 值 。 

dotted: 点 状 轮廓 。 

dashed: 虚线 轮 廊 。 

solid: 实 线 轮廓 。 

double: 双 线 轮廓 。 两 条 单线 与 其 间隔 的 和 等 于 指定 outline-width 值 。 
groove: 3D 四 槽 轮廓 。 

ridge: 3D 四 模 轮廓 。 

inset: 3D 止 边 轮廓 。 

outset: 3D 四边 轮 廓 。 

. 设置 颜色 

outline-color 属性 可 以 设置 轮廓 线 的 颜色 。 基 本 语法 如 下 : 


outline-color: <color> | Invert 

取 值 简单 说 明 如 下 。 

<color>: 指定 颜色 。 

invert: 使 用 背景 色 的 反 色 。 该 参数 值 目 前 仅 在 正 及 Opera 下 有 效 。 
4. 设置 偏 移 

outline-offset 属性 可 以 设置 轮廓 线 的 偏 移 位 置 。 基 本 语法 如 下 : 
outline-offset: <length> 


闪闪 办 办 鲜 凶 他 


Ly 
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用 长 度 值 来 定义 轮廓 偏 移 ， 人 允许 为 负 值 ， 默 认 值 为 0。 
【示例 1】 在 12.2.1 节 示 例 基础 上 ， 通 过 outline-offset 属性 放大 轮 亡 线 ， 使 其 看 起 来 更 大 方 ， 演 ] 
示 效 果 如 图 12.5 所 示 。 下 面 代码 仅 显 示 局 部 CSS 样式 ， 完 整 示例 样式 和 结构 请 参考 12.2.1 节 示 例 代 码 。 | 


<style type="text/css"> 


和 # 设 计 表 单 内 文本 框 和 按钮 在 被 激活 和 获取 焦点 状态 下 时 ， 轮 廓 线 的 宽 、 样 式 和 颜色 Porn 
input:focus, button:focus {outline: thick solid #b7ddf2} 
input:active, button:active {outline: thick solid #aaa} 
/# 通 过 outline-offset 属性 放大 轮廓 线 */ 
input:active, button:active {outline-offset: 4px:;} 
input:focus, button:focus {outline-offset: 4px;} 
</style> 
<div 1d="stylized" class="myform"> 
<form 1d="form1" name="forml]" method="post" action=""> 
<h1> 登 录 </h1> 


</form> 
</div> 


门 lacalhost/rmysite/test.ht x 
3 GG Blocalhost/mysite/test.html 二 | 申 刁 


门 lacalhost/rmsite/test.ht x 
所 人 上台 [Blocalhost/mysite/test.html 站 | 到 已 


Fmaill 


包 了 出 闹 


Password 
窗 厅 一 


激活 状态 获取 焦点 状态 
图 12.5 放大 激活 和 焦点 提示 框 


【示例 2】 下 面 示例 为 段落 文本 中 部 分 文字 定义 轮廓 线 ， 演 示 效 果 如 图 12.6 所 示 。 


<style type="text/css"> 

.outline {outline: red solid 2px;:} 

</style> 

<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE 时 ，<span class="outline">Intermet Explorer 8 (以 及 更 高 版 本 ) 
</span> 才 支持 outline 属性 。</p> 


Xx 


和 过- XN pe http://localhost/mm ~ 及 


8 以 及 更 


12.6 ”轮廓 边框 效果 


一 一 一 
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12.3 边框 样式 


边框 是 CSS 盒 模型 的 重要 组 成 部 分 ， 本 节 将 介绍 CSS3 增强 的 边框 样式 , 包括 IR 
权威 参考 : http://www.w3.org/TR/css3-border/。 


12.3.1 定义 边框 图 像 源 


CSS3 新 增 的 border-image 属性 能 够 模拟 background-image 属性 功能 ， 
且 功 能 更 加 强大 ， 该 属性 的 基本 语法 如 下 : 
border-imasge: <'border-1mage-source> || <'border-1mage-slice’> [/ <border-Image-wlidth> | / <border- 1mage-width'>? / 


<'border-1mage-outset'>|? || <'border-1mage-repeat'> 


取 值 说 明 如 下 。 

<'border-image-source>: 设置 对 象 的 边框 是 否 用 图 像 定 义 样式 或 图 像 来 源 路 人 径 。 
<'border-image-slice>: 设置 边框 图 像 的 分 割 方式 。 

<'border-image-width'>: 设置 对 象 的 边框 图 像 的 宽度 。 

<'border-image-outset>: 设置 对 象 的 边框 图 像 的 扩展 。 

<'border-image-repeat>: 设置 对 象 的 边框 图 像 的 平 铺 方 式 。 

【示例 】 下 面 示 例 为 元 素 div 定义 边框 图 像 ， 使 用 border-image-source 导入 外 部 图 像 源 images/ 
borderl.png， 通 过 border-image-slice 属性 ， 值 为 (27 27 27 27)， 把 图 像 切 分 为 9 块 ， 然 后 分 别 把 这 9 
块 图 像 切 片 按 顺 序 填 充 到 边框 四 边 、 四 和 角 和 内 容 区 域 。 示 例 主 要 代码 如 下 ， 页 面 浏览 效果 如 图 12.7 
所 示 。 

<style type="text/css"> 
dv { 
height: 1 60px:; 
border:solld 27px: 
谍 设 置 边框 图 像 */ 
border-1mage: Url(masges/border1.png) 27: 
</style> 
<div></div> 


DD locelhost/mysite/testht x 
© |[ localhost/mysite/test.htm 


图 12.7 定义 边框 背景 样式 
在 上 面 示例 中 ,使 用 了 一 个 71px*71px 大 小 的 图 像 ， 将 这 个 正方 形 图 像 等 分 为 9 个 方块 ， 每 个 方 
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Ny 
块 大 小 为 21px*21px。 当 声明 border-image-slice 属性 值 为 (27 27 27 27) 时 ， 则 按 下 面 说 明 进 行 解析 : 
第 1 个 参数 值 表示 从 上 疝 下 载 切 图 像 ， 显 示 在 项 边 。 
第 2 个 参数 值 表 示 从 右 回 左 裁 切 图 像 ， 显 示 在 右边 。 | 
加 ”第 3 个 参数 值 表示 从 下 向 上 裁 切 图 像 ， 显 示 在 底 边 。 | 会 六 
呵 第 4 个 参数 值 表 示 从 左 同 右 裁 切 图 像 ， 显示 在 左边 。 | 


12.3.2 ”定义 边框 图 像 平 铺 方式 


border-image-repeat 属性 设置 对 象 的 边框 图 像 的 平 铺 方式 。 该 属性 的 基本 语法 如 下 : | 入 大 讲解 
border-1mage-repeat: [stretch | repeat | round | space]11.:2} | 

取 值 简单 说 明 如 下 。 

stretch: 用 拉 伸 方式 来 填充 边框 图 像 ， 为 默认 值 。 

repeat: 用 平 铺 方式 来 填充 边框 图 像 。 当 图 片 碰 到 边界 时 ， 如 果 超 过 则 被 截断 。 | 

round: 用 平 铺 方式 来 填充 边框 图 像 。 图 像 会 根据 边框 的 尺寸 动态 调整 图 像 的 大 小 ， 直 至 下 | 


好 可 以 铺 满 整个 边框 。 / 
回 ”space: 用 平 铺 方式 来 填充 边框 图 像 。 图 像 会 根据 边框 的 尺寸 动态 调整 图 像 之 间 的 间距 , 直 ， 
至 正好 可 以 铺 满 整个 边框 。 


【 示例】 下面 示例 以 12.3.1 节 示 例 为 基础 ， 设 置 边框 图 像 平 铺 显示 : border-image-repeat:Tround:， / 
演示 效果 如 图 12.8 所 示 。 | 


<style type="text/css"> 

dv { 
height: 160px; 
background:hsla(93,96%,62%, 1.00); 
border:solid 27px red: | 
记 设 置 边框 图 像 源 */ | 
border-image-source: Url(images/border1.png): | 
谍 设 置 边框 图 像 的 平 铺 方式 */ 
border-1mage-repeat:round; 

} 

</style> 


口 Ilocalhost8080/mysite x \ 】 


Treerra site/testhtml 


图 12.8 定义 边框 图 像 平 铺 显示 
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于。 12.3.3 ”定义 边框 图 像 宽度 


border-image-width 属性 设置 对 象 的 边框 图 像 的 宽度 。 该 属性 的 基本 语法 如 下 : 
border-1mage-width: [<length> | <percentage> | <number> | auto|{1,4} 


取 值 简单 说 明 如 下 。 
<length>: 用 长 度 值 指 定 宽度 。 不 允许 为 负 值 。 
<percentage>: 用 百分比 指定 宽度 。 参 照 其 包含 块 进行 计算 ， 不 允许 为 负 值 。 
<number>: 用 浮 点 数 指定 宽度 。 不 允许 为 负 值 。 
auto: 如 果 auto 值 被 设置 ， 则 <'border-image-width 人 > 采用 与 <'border-image-slice 人 > 相同 的 值 。 
【示例 】 下 面 示例 以 12.3.2 节 示 例 为 基础 ， 设 置 边 框 背 景 平 铺 显示 : border-image-repeat:round;， 
图 像 宽度 为 S00px， 演 示 效 果 如 图 12.9 所 示 。 
<style type="text/css"> 
dv { 
height: 160px;: 
background:hsla(93,96%,62%, 1.00); 
border:solid 27px red: 
谍 设 置 边框 图 像 源 */ 
border-1mage-source: Url(mages/border1.png); 
记 设 置 边 框图 像 的 平 铺 方 式 */ 
border-1mage-repeat:round:; 
此 设置 边框 图 像 的 宽度 */ 
border-1mage-width: 500px; 


有 办 多 


} 

</style> 

<div>border-1mage-source: url(1mages/border] .png):<br> 
border-1mage-repeat:round:;<br> 
border-1mage-width:S00px;</div> 


口 localhost8080/mysite x ® 


GG | ©@ localhost:8080/mysite/test.html 


图 12.9 定义 边框 图 像 宽 度 
_ 12.3.4 定义 边框 图 像 分 割 方式 


border-image-slice 属性 设置 对 象 的 边框 图 像 的 分 割 方式 。 该 属性 的 基本 语法 如 下 : 
| border-1mage-slice: [<number> | <percentage>|{1,4} && fi11? 
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取 值 简单 说 明 如 下 。 

加 ”<number>: 用 浮 点 数 指定 宽度 。 不 允许 为 负 值 。 ] 

<percentage>: 用 百分比 指定 宽度 。 参 照 其 包含 块 区 域 进行 计算 ， 不 允许 为 负 值 。 

加 ”fill: 保留 裁剪 后 的 中 间 区 域 ， 其 铺 排 方式 遵循 <' border-image-repeat > 的 设 定 。 | 会 六 

【 示例】 下面 示例 以 12.3.3 节 示 例 为 基础 ， 设 置 边框 背景 平 铺 显示 : border-image-repeat:round:， 一 全 
设置 裁 切 值 为 10: border-image-slice: 10;， 演 示 效 果 如 图 12.10 所 示 。 


<style type="text/css"> | 

div { | 
height: 160px; 
background:hsla(93,96%,62%,1.00): | 
border:solid 27px red: | 
/# 设 置 边 框图 像 源 %/ | 
border-1mage-source: url(1mages/border] .pneg); 
谍 设 置 边框 图 像 的 平 铺 方式 */ 
border-1mage-repeat:round:; 
上 设置 边框 图 像 的 宽度 */ | 
border-image-width: S00px: | 
虚设 置 边框 图 像 的 裁 切 值 为 10*/ | 
border-imasge-slice: 10; 

} ] 

</style> 

<div>border-1mage-source: url(i1mages/borderl .png);<b1> 
border-1mage-repeat:round:<br> 
border-1mage-slice: 10;</div> 


DD lecalhost:8080/mysits/ x 也 


C | © localhost8080/mysite/testhtml 


图 12.10 ”定义 边框 图 像 裁 切 值 

12.3.5 ”定义 边框 图 像 扩展 和 
| 
border-image-outset 属性 设置 对 象 的 边框 图 像 的 扩展 。 该 属性 的 基本 语法 如 下 : | 


border-i1mage-outset: [<length> | <number>]{1,4} 


取 值 简单 说 明 如 下 。 | 
<length>: 用 长 度 值 指定 宽度 。 不 允许 为 负 值 。 | 
<number>: 用 浮 点 数 指定 宽度 。 不 允许 为 负 值 。 | 
【示例 】 下 面 以 12.3.4 节 示 例 为 基础 ， 设 置 边框 背景 向 外 扩展 50px， 演 示 效 果 如 图 12.11 所 示 。 ， 
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<style type="text/css"> 
dv { 

height: 160px; 

margin:60px; 
会 background:hsla(93,96%,62%,1.00): 
> border:solld 27px red: 

席 设 置 边框 图 像 源 */ 

Note border-1mage-source: Url(mages/border1.png); 
谍 设 置 边框 图 像 的 平 铺 方式 */ 
border-1mage-repeat:round:; 
此 设置 边框 图 像 的 宽度 */ 
border-1mage-width: S00px; 
虚设 置 边框 图 像 的 裁 切 值 为 10*/ 
border-1mage-slice: 10; 
上 设置 边框 图 像 向 外 扩展 50px*/ 
border-1mage-outset: SOpx; 


} 

</style> 

<div>border-1mage-source: url(1mages/border] .png):;<br> 
border-1mage-repeat:round;<br> 
border-1mage-slice: 10:<br> 
border-1mage-outset: SO0px:;</div> 


口 Iecalhost8080/mysits x On 


gr | © localhost:8080/mysite/test.html 


图 12.11 定义 边框 图 像 铝 外 扩展 
12.3.6 ”案例 : 应 用 边框 图 像 


下 面 结合 示例 介绍 border-image 在 页 面 中 的 应 用 。 
【示例 1】 下 面 示例 演示 如 何 设 计 左 下 和 右 下 圆 角 显示 ， 演 示 效 果 如 图 12.12 所 示 。 


<style type="text/css"> 
dv { 
height: 120px: 
text-align:center:; 
border-style:solid; 
border-width: 10px: 
border-1mage: url(1mages/r2.png) 20; 
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</style> 
<div>border-image: url(imagesA2.png) 20; 图 像 源 效果 图 下 所 示 : <br> 
<img src="images/r2.png" /></div> 

| 


【示例 2】 设 计 完 全 圆 角 边框 效果 。 设 计 圆 角 图 像 大 小 为 42px*42px， 裁 切 半径 为 20px， 显 示 效 
果 如 图 12.13 所 示 。 


<style type="text/css"> Note 
dv { 
height: 120px: 
text-align:center:; 
border-style:solid; 
border-width: 10px; 
border-1mage: url(1mages/r3 .png) 20; 
} 
</style> 
<div>border-image: url(images/r3.png) 20; 图 像 源 效果 图 下 所 示 : <br> 
<Img src="i1mages/r3.png" /></div> 


口 localhost8080/mysite/ x WB \ BD lecalhost8080/mysite/ x ®\ 


Ee | © localhost:8080/mysite/test1.html : 和 | © localhost:8080/mysite/test2.html 


bcordcr -imasc: url (limagcs/r2. 出 20; 图 像 驮 效果 图 让 所 示 : baordcr-imagc: url limagcs/r3.png) 20; 图 像 源 效 果 图 下 所 示 : 


图 12.12 ”定义 边框 局 部 圆 角 样式 图 12.13 ”定义 完全 圆 角 边框 样式 
【示例 3】 设 计 阴 影 特 效 。 设 计 边 框图 像 大 小 为 42px*42px， 显 示 效 果 如 图 12.14 所 示 。 
<style type="text/css"> 
img { 
height:400px; 
border-style:solid; 


border-width:2px Spx 6px 2px: 
border-i1mage: url(images/r4.png) 25562; 
} 
</style> 


<1lmg src="1mages/2.jpg" /> 


【示例 4】 设计 选项 卡 。 设计 边框 图 像 大 小 为 12px*27px， 圆 角 半 径 为 12px， 显示 效果 如 图 12.15 
所 示 。 


<style type="text/css"> 

ul{ 
margin:0; padding:0; 
list-style-type:none:; 

} 

ht 
width: 100px; height:20px; 
border-style:solid; 


广 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
i 
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cursor:pointer; 

float:left: 

padding:4px 0; 

text-align:center; 

border-wldth:Spx Spx Opx:; 
border-1mage: url(images/rS.png) $5 5 0; 


</style> 


<ul> 


< 一]> 首 页 一 人 > 
< 一]> 咨 询 下 > 
<]li> 关 于 </li> 


</ul> 


口 localhost:s080/mysite x 


口 localhost:8080/mysite/ x © 


ke | © localhost:8080/mysite/test4.htm 安 | : 


| 疼 | 咨询 | 关于 
1 


图 12.14 定义 边框 阴影 样式 图 12.15 定义 选项 卡 样式 


有 12.3.7 ”定义 圆 角 边框 


CSS3 新 增 border-radius 属性 ,使 用 它 可 以 设计 元 素 的 边框 以 圆 角 样式 显示 。border-radius 属性 的 


基本 语法 如 下 : 


border-radius: [<length> | <percentage>|{1,4} [/ [<length> | <percentage>|]{1,4}1? 
取 值 简单 说 明 如 下 。 


<length>: 用 长 度 值 设置 对 象 的 圆 角 半径 长 度 。 不 允许 为 负 值 。 
<percentage>: 用 百分比 设置 对 象 的 圆 角 半径 长 度 。 不 允许 为 负 值 。 


为 了 方便 定义 4 个 顶 角 的 圆 角 ，border-radius 属性 派生 了 4 个 子 属性 。 


名 
四 
四 
四 


border-top-right-radius: 定义 右上 角 的 圆 角 。 
border-bottom-right-radius: 定义 右 下 角 的 圆 角 。 
border-bottom-left-radius: 定义 左下 角 的 圆 角 。 
border-top-left-radius: 定义 左上 角 的 圆 角 。 


会 提示 : border-radius 属性 可 包含 两 个 参数 值 : 第 一 个 值 表示 圆 角 的 水 平 半 径 ， 第 二 个 值 表示 圆 角 


的 垂直 半径 ， 两 个 参数 值 通过 斜 线 分 隔 。 如 果 仅 包含 一 个 参数 值 ， 则 第 二 个 值 与 第 一 个 值 
相同 ， 它 表示 这 个 角 是 一 个 四 分 之 一 圆 角 。 如 果 参 数值 中 包含 0， 则 这 个 角 就 是 矩形 ， 不 
会 显示 为 圆 角 。 
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针对 border-radius 属性 参数 值 ， 各 种 浏览 器 的 处 理 方式 并 人 不一致。 在 Chrome 和 Safari 浏览 右 中 ， | 
会 绘制 出 一 个 椭圆 形 边框 ， 第 一 个 半径 为 椭圆 的 水 平方 向 半径 ， 第 二 个 半径 为 椭圆 的 垂直 方向 半径 。 
在 Firefox 和 Opera 浏览 嚣 中， 将 第 一 个 半径 作为 边框 左上 角 与 右 下 角 的 圆 半 径 来 绘制 ， 将 第 二 个 半 
径 作 为 边框 右上 角 与 左下 角 的 圆 半径 来 绘制 。 ] 会 

【示例 1】 下 面 给 border-radius 属性 设置 一 个 值 : 10px， 则 演示 效果 如 图 12.16 所 示 。 | 


<style type="text/css"> Note 
img { 
height:300px; 
border: 1px solid red: 
border-radius: 1 Opx: 
} 
</style> 
<img src="i1mages/1.jpg" /> 


如 果 为 border-radius 属性 设置 两 个 参数 值 ， 则 效果 如 图 12.17 所 示 。 


img { 
helght:300px: 
border: 1px solid red: 
border-radius:20px/40px:; 
} 


图 12.16 定义 圆 角 样式 (1) 图 12.17 定义 圆 角 样式 (2) 


也 可 以 为 元 素 的 4 个 项 角 定 义 不 同 的 值 ， 实 现 的 方法 有 两 种 。 

第 1 种 ， 利 用 border-radius 属性 ， 为 其 赋 一 组 值 。 当 为 border-radius 属性 赋 一 组 值 时 ， 将 遵循 
CSS 赋值 规则 ， 可 以 包含 2 个 、3 个 或 者 4 个 值 集 合 。 但 是 此 时 无 法 使 用 斜 杠 方式 定义 圆 角 的 水 平和 
垂直 半径 。 

如 果 是 4 个 值 ， 则 这 4 个 值 将 按照 top-left、top-right、bottom-right、bottom-left 顺序 来 设置 。 

如 果 bottom-left 值 省 略 ， 那 么 它 等 于 top-right。 

如 果 bottom-right 值 省 略 ， 那 么 它 等 于 top-left。 

如 果 top-right 值 省 略 ， 那 么 它 等 于 top-left。 

如 果 为 border-radius 属性 设置 4 个 值 的 集合 参数 ， 则 每 个 值 表示 每 个 角 的 圆 角 半径 。 

【示例 2】 下 面 示例 为 图 像 的 4 个 项 角 定义 不 同 圆 角 半径 ， 演 示 效 果 如 图 12.18 所 示 。 
img { 
height:300px; 
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border: 1px solid red; 

border-radius: 1 0px 30px SOpx 70px:; 
} 
| 如 果 为 border-radius 属性 设置 3 个 值 的 集合 参数 ， 则 第 1 个 值 表示 左上 角 的 圆 角 半径 ， 第 2 个 值 
， 表 示 右 上 和 左下 两 个 角 的 贺 角 半径 ， 第 3 个 值 表 示 右 下 角 的 圆 角 半径 。 


如 果 为 border-radius 属性 设置 2 个 值 的 集合 参数 ， 则 第 1 个 值 表示 左上 角 和 右 下 角 的 圆 角 半径 ， 


第 2 个 值 表示 右上 和 左下 两 个 角 的 圆 角 半径 。 
第 2 种 , 利用 派生 子 属性 进行 定义 ， 如 border-top-right-radius、border-bottom-right -radius、border- 
| bottom-left-radius、border-top-left-radius。 
| < 入 注意 : Gecko 和 Presto 引擎 在 写法 上 存在 很 大 差异 。 
【示例 3】 下 面 代 码 定 义 div 元 素 右 上 角 为 50px 的 圆 角 ， 演 示 效 果 如 图 12.19 所 示 。 
Img { 
height:300px; 
border: 1px solid red:; 
-moz-border-radius-topright:SOpx:; 


-webkit-border-top-right-radius:SOpx: 
border-top-right-radius:SOpx; 


pp 图 12.18 分 别 定 义 不 同 项 角 的 圆 角 样式 图 12.19 定义 某 个 项 角 的 圆 角 样式 
注 站。 12.3.8 ”案例 : 设计 椭圆 图 形 


使 用 border-radius 属性 设计 圆 角 时 ， 可 能 会 存在 下 面 几 种 情况 : 
回 如果 受 影响 的 角 的 两 个 相 邻 边 宽 度 不 同 ， 那 么 这 个 圆 角 将 会 从 宽 的 一 边 圆滑 过 渡 到 军 的 一 
边 ， 即 偏 癌 宽 边 的 圆 弧 略 大 ， 而 偶 问 军 边 的 圆 距 略 小 。 

加 ”如 果 两 条 边 宽 度 相同 ， 那 么 圆 角 两 个 相 邻 边 呈 对 称 圆 弧 显示 ， 即 相交 45” 的 对 称 线 上 。 

加 ”如 果 一 条 边 宽度 是 相 邻 另 一 条 边 宽度 的 两 倍 ， 那 么 两 边 圆 距 线 交 于 靠近 罕 边 的 30” 角 线 上 。 
border-radius 不 允许 圆 角 彼此 重 登 ， 当 相 邻 两 个 圆 角 的 半径 之 和 大 于 元 素 的 宽 或 高 时 ， 在 浏览 右 

会 呈现 为 椭圆 或 正 圆 效果 。 
【 示例】 下面 代 码 定 义 img 元 素 显 示 为 圆 形 ， 当 图 像 宽 高 比 不 同时 ， 显 示 效 果 不 同 ， 如 图 12.20 


| 所 示 。 
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<style type="text/css"> 

img {/* 定 义 图 像 圆 角 边框 */ 
border: solid 1px red: 
border-radius: 50%: /* 圆 角 */ 


} 

I] {定义 第 1 幅 图 像 宽 高 比 为 1:1*/ 
width:300px:; 
height:300px; 


} 

.I2 {/* 定 义 第 2 幅 图 像 宽 高 比 不 为 1:1*/ 
width:300px; 
height:200px; 


} 
3 {/* 定 义 第 3 幅 图 像 宽 高 比 不 为 1:1*/ 
width:300px:; 
height: 100px; 
border-radius: 20px;: /* 定 义 圆 角 */ 
} 
</style> 
<img class="r1" src="images/1.jpg" title=" 圆 角 图 像 " /> 
<img class="r2" src="images/1.jpg" title=" 棚 圆 图 像 " /> 
<img class="r3" src="images/1.jpg" title=" 圆 形 图 像 " /> 


& 一 办 "| 导 nttp’/ /localhost 8080/mysite /test.htm 


图 12.20 定义 圆 形 显 示 的 效果 


12.4 盒子 阴影 


CSS3 的 box-shadow 类 似 于 text-shadow， 不 过 text-shadow 负责 为 文本 设置 阴影 ， 而 box-shadow 


负责 给 对 象 定义 图 层 阴 影 效 果 。 
权威 参考 : http://www.w3.org/TR/css3-border/。 


12.4.1 定义 盒子 阴影 


box-shadow 属性 可 以 定义 元 素 的 阴影 ， 基 本 语法 如 下 : 
box-shadow: none | Inset? && <length>1{2,4} && <color>? 
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取 值 简单 说 明 如 下 。 
none: 无 阴影 。 
inset: 设置 对 象 的 阴影 类 型 为 内 阴影 。 该 值 为 空 时 ， 则 对 象 的 阴影 类 型 为 外 阴影 。 
<length>GD: 第 1 个 长 度 值 用 来 设置 对 象 的 阴影 水 平 偏 移 值 。 可 以 为 负 值 。 
<length>Q@: 第 2 个 长 度 值 用 来 设置 对 象 的 阴影 垂直 偏 移 值 。 可 以 为 负 值 。 
<length>(3): 如 果 提 供 了 第 3 个 长 度 值 ， 则 用 来 设置 对 象 的 阴影 模糊 值 。 不 允许 为 负 值 。 
<length>(4): 如 果 提 供 了 第 4 个 长 度 值 ， 则 用 来 设置 对 象 的 阴影 外 延 值 。 可 以 为 负 值 。 
<color>: 设置 对 象 的 阴影 的 颜色 。 
下 面 结合 示例 进行 演示 说 明 。 
【示例 1】 下 面 示例 定义 一 个 简单 的 实 影 投 影 效 果 ， 演 示 效 果 如 图 12.21 所 示 。 

<style type="text/css"> 
img{ 

height:300px: 

box-shadow:Spx Spx:; 


上 办 办 凶 多 的 


} 
</style> 
<lmg src="1mages/1.jpg" /> 
【示例 2】 定义 位 移 、 阴 影 大 小 和 阴影 颜色 ， 演 示 效 果 如 图 12.22 所 示 。 
imgt 
height:300px; 
box-shadow:2px 2px 10px #06C.:; 
} 


天 
< -ET + ¢ [SHETTY 


图 12.21 定义 简单 的 阴影 效果 图 12.22 ”定义 复杂 的 阴影 效果 
【示例 3】 定 义 内 阴影 ， 阴 影 大 小 为 10px， 颜 色 为 #06C， 演 示 效 果 如 图 12.23 所 示 。 


<style type="text/css"> 
pre { 
padding: 26px; 
font-size:24px:; 
box-shadow: Inset 2px 2px 10px #06C; 
} 
</style> 
<pre> 
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-moz-box-shadow: Inset 2px 2px 10px #06C:; ] 
-webkit-box-shadow: Inset 2px 2px 10px #06C:; | 
box-shadow: inset 2px 2px 10px #06C: 
</pre> ] 


x 


雪 - 一 由 :| 多 hitp://localhost:8080/mysite/test3.html ~ 昌 节 公交 六 
MA [ol 


-moz-box-shadqow: inset 2px 2px lO0px #06C; 


-webkit-box-shadow: Inset 2px 2px 10pX #06C; 
box-shadow: inset 2px 2px 1l0px #06C; 


12.23 ”定义 内 阴影 效果 
【示例 4】 通 过 设置 多 组 参数 值 定义 多 色 阴 影 ， 演 示 效 果 如 图 12.24 所 示 。 
Img { 
height: 300px: 
box-shadow: -10px 0 12px red, 
10px 0 12px blue, 
0 -10px 12px yellow, 
0 10px 12px green:; 


} 
【示例 S】 通 过 多 组 参数 值 定义 渐变 阴影 ， 演 示 效 果 如 图 12.25 所 示 。 


<!doctype html> 
img{ 
height:300px; 
box-shadow:0 0 10px red, 
2px 2px 10px 10px yellow, 
4px 4px 12px 12px green:; 


和 人 仿 由 - 总 http://localho.. ~ 全 G 筷 locslhost xX ni 各 ee 中 - [SS hitp://localho.. ~ 人 0 绰 locslhost x mn, 


图 12.24 定义 多 色 阴 影 效 果 12.25 ”定义 渐变 阴影 效果 


< 八 注意 : 当 给 同一 个 元 素 设计 多 个 阴影 时 ， 最 先 写 的 阴影 将 显示 在 最 顶层 。 


三 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
i 
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12.4.2 案例: box-shadow 的 应 用 


本 节 通 过 一 个 简单 的 示例 进一步 练习 box-shadow 的 应 用 。 
【操作 步骤 】 
第 1 步 ， 设 计 一 个 简单 的 盒子 ， 并 定义 基本 形状 。 


<style type="text/css"> 


-box{ 
width:100px: height:100px: 上 固定 大 小 */ 
text-align:center: line-height:100px: 诺 显 示 在 中 央 */ 
background-color:rgba(255,204,0,.5): 人 * 浅 色 背 景 */ 
border-radius:10px: /# 适 当 圆 角 状 
padding:10px; margin:10px: /# 添 加 间距 状 

} 

</style> 


<div class="box bsl">box-shadow</div> 


第 2 步 ， 阴影 就 是 对 原 对 象 的 复制 ,包括 内 边 距 和 边框 都 属于 box 的 占 位 范围 ， 阴 影 也 包括 对 内 
边 距 和 边框 的 复制 ， 但 是 阴影 本 身 不 占据 布局 的 空间 。 比 较 效果 如 图 12.26 所 示 。 


.bsl{box-shadow:120px Opx #cce:} 

第 3 步 ， 设 计 四 周 有 一 样 模糊 值 的 阴影 ， 如 图 12.27 所 示 。 
.bsl {box-shadow:0 0 20px #666:} 

第 4 步 ， 定 义 5px 扩展 阴影 ， 如 图 12.28 所 示 。 

.bsl {box-shadow:0 0 0 5px #333:} 


me +) @ http://localho... v BO se) httpy/localho.. -Rd 


© 人 由 - | 大 htp://localho.. 7 R dc 恒 localhost 


图 12.26 比较 对 象 和 阴影 大 小 图 12.27 四 周 同时 显示 阴影 图 12.28 定义 扩展 阴影 


阴影 不 像 border 要 占据 布局 的 空间 , 因此 要 实现 对 象 鼠 标 经 过 产生 外 围 的 边框 , 可 以 使 用 阴影 的 
扩展 来 代替 border。 或 者 使 用 border 的 transparent 实现 ， 不 过 不 如 box-shadow 的 spread 扩展 方便 。 
如 果 使 用 border， 布 局 会 产生 影响 。 

第 5 步 ， 扩 展 为 负 值 的 阴影 ， 如 图 12.29 所 示 。 


-bsl { 
box-shadow: 0 1Spx 10px -1Spx #333; 
border: none: 

} 


< 匀 注意 : 要 产生 这 样 的 效果 ，y 轴 的 值 和 spread 的 值 刚好 是 一 样 且 相反 的 。 其 他 边 设计 同 理 。 


“ds 
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第 6 步 ， 定 义 内 阴影 ， 如 图 12.30 所 示 。 


-bsl { 
background-color: #1C8426: 
box-shadow: Opx Opx 20px #Htf inset: 

) 到 - 


Mu +) @ http://localho... - BU 让 四- 办 htp:localho ~ BO 


图 12.29 定义 负 值 阴影 图 12.30 定义 内 阴影 

< 锯 注意 : 可 以 直接 为 div 这 样 的 盒子 设置 box-shadow 售 阴 影 ， 但 是 不 能 直接 为 img 图 片 设置 爹 阴影 。 
/* 直 接 在 图 片上 添加 内 阴影 ， 无 效 拟 
.img-shadow img { | 
box-shadow: Inset 0 0 20px red:; 

} 
可 以 通过 为 img 的 容器 div 设置 内 阴影 ， 然 后 让 img 的 z-index 为 -1， 来 解决 这 个 问题 。 但 是 这 ， 
种 做 法 不 可 以 为 容器 设置 背景 颜色 ， 因 为 容器 的 级 别 比 图 片 高 ， 设 置 了 背景 颜色 会 挡住 图 片 ， 效 果 如 ， 
图 12.31 所 示 。 | 
上 * 在 图 片 容器 上 添加 内 阴影 ， 生 效 */ 


.box-shadow { 
box-shadow: inset 0 0 20px red: | 
display:inline-block:; | 

} | 

.box-shadow Img { | 
position: relative:; | 
Z-lndex: -1; | 

} | 


还 有 一 个 更 好 的 方法 , 不 用 考虑 图 片 的 层级 ,利用 :before 伪 元 素 可 以 实现 ， 而 且 还 可 以 为 父 容器 ， 
添加 背景 颜色 等 。 
谍 为 图 片 容器 添加 伪 元 素 或 伪 类 ， 不 用 为 img 设置 负 的 z-index 值 ， 有 内 阴影 */ 
img { 
position: relative; 
background-color: #FC3; 


padding: 5px; 
} | 
Img:before { 
content: ": 


position: absolute: 
top: 0; right: 0; bottom: 0; left: 0; 
box-shadow: 1nset 0 0 40px #f00; 
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| 
| 第 7 步 ， 定 义 多 个 阴影 ， 如 图 12.32 所 示 。 


-bsl { 
box-shadow: 40px 40px rgba(26,202,221.,0.5), 
80px 80px rgba(236,43,120,.5); 
border-radius: 0: 


| x 
1 
| 二 和 全 旨 四， 古 hapy/localho- * 号 | 总 localhost x 


Xx 
| HD- @ mitoylocalho.. » SO | Blocahos 
| 所 一 ~| 息 httpyjlocalho... ~ 全 人 | 
到 cc 是 htpyjlocal Ey 届 localhos 
本 


| 
] 图 12.31 为 图 片 定义 内 阴影 图 12.32 定义 多 个 阴影 


” 肉 提 示 : 阴影 也 是 有 层 双 关系 的 ， 前 面 的 阴影 层级 高 ,会 压 住 后 面 的 阴影 。 阴 影 和 阴影 之 间 的 透明 
| 度 可 见 ， 而 主体 对 象 的 透明 度 对 阴影 不 起 作用 。 


ne “12.4.3 案例 : 设计 旋 边 阴影 
与 
回 E WP 
本 例 使 用 box-shadow 设计 贡 边 阴影 ， 普 边 效 果 就 是 四 角 劳 边 征 起 阴影 ， 如 图 12.33 所 示 。 


| +) |@ httpy/localhost:s080/mysite/jtest.html " 量 C | 人 localhost x 


图 12.33 ”设计 青 边 阴影 效果 


<style type="text/css"> 

| * {margin: 0; padding: 0:} 记 清 除 页 边 距 */ 

ul {list-style: none:} 上 清除 项 目 列 表 符号 */ 

] .box {/* 设 计 盒子 样式 */ 

width: 980px: height: auto: 访 固 定 大 小 ， 高 度 自动 调整 */ 
| clear: both: 

overflow: hidden: 诺 禁 止 超出 显示 */ 
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margin: 20px auto: 诺 居 中 显示 */ 


} 
.box li {/* 设 计 每 个 图 片 外 框 样式 */ 


background: #fff: 话 白 色 背 景 */ 

float: left: 颇 浮 动 并 列 显示 */ Ey 
position: Telative: 访 定 义 定 位 包含 框 */ 一 一 
margin: 20px 10px; 谍 调 整 项 目 间距 */ 

border: 2px solid #efefef: /# 增 加 浅 色 边框 #/ 
上/# 深 加 内 阴影 煌 


box-shadow: 0 lpx 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) mset: 


} 
.box li img {/* 固 定 图 片 大 小 ， 增 加 外 边 距 */ 
width: 290px: height: 200px: 


margin: Spx; 

} 

.box li:before {/* 在 左 侧 添 加 瓯 起 阴影 */ 
content: "": /# 空 内 容 #/ 
position: absolute: 旋回 定 定位 */ 
width: 90%: height: 80%; 皮 定义 大 小 */ 
bottom: 13px: left: 21px: /定位 #/ 
backeround: transparent: 谍 透 明 背 景 */ 
z-index: -2: 上 显示 在 照片 下 面 */ 
box-shadow: 0 8px 20px rgba(0,0,0,0.8); /* 添 加 阴影 */ 


transform: skew(-12deg) rotate(-6deg); ”/* 变 形 并 旋转 阴影 ， 让 其 戎 起 */ 


} 
.box li:after {/* 在 右 侧 添 加 瘾 起 阴影 方法 同上 */ 
content: "": 
position: absolute: 
width: 90%:height: 80%; 
bottom: 13px:; right: 21px: 


Z-Index: -2: 
background: transparent: box-shadow: 0 8px 20px rgba(0,0,0,0.8); 
transform: skew(12deg) rotate(6deg); 

} 

</style> 


<ul class="box"> 
<]i><Img src="1mages/1.jpg" /></li> 
<li><i1mg src="i1mages/2.jpg" /></li> 
<]i><Img src="1mages/3.jpg" /></l1> 
</ul> 
本 例 主 要 使 用 CSS3 的 伪 类 :before 和 :after, 分 别 在 被 插 盒 子 里 面 内 容 的 前 面 和 后 面 动态 插入 空 内 | 
容 。 设 置 盒子 时 ， 每 个 盒子 的 大 小 都 要 算 清楚 ， 小 盒子 不 要 超过 大 盒子 范围 ， 而 且 也 不 要 浪费 。 使 用 
z-index 属性 设置 元 素 的 堆 羡 顺序 ， 拥 有 更 融 堆 车 顺序 的 元 素 总 是 会 处 于 堆 匡 顺序 较 低 的 元 素 的 前 面 ， 
它 仅 能 在 定位 元 素 上 答 效 。 
skew0 〇 函数 能 够 让 元 素 倾斜 显示 ， 它 可 以 将 一 个 对 象 以 其 中 心 位 置 围绕 着 x 轴 和 y 轴 按 照 一 定 的 ， 
角度 倾斜 。rotate0 函 数 只 是 旋转 ， 而 不 会 改变 元 素 的 形状 。skew0 函 数 不 会 旋转 ， 而 只 会 改变 元 素 的 
形状 。 相 关 知 识 将 在 后 面 章节 介绍 。 
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12.5 案例 实战 


本 节 将 通过 两 个 案例 练习 CSS 盒 模型 相关 组 成 要 素 的 具体 应 用 。 
12.5.1 设计 内 容 页 


本 例 将 应 用 box-shadow、text-shadow 和 border-radius 等 属性 ， 定 义 一 个 包含 阴影 和 圆 角 的 特效 ， 
同时 利用 CSS 渐变 、 半 透明 特效 设计 精致 的 栏目 效果 ， 预 览 效 果 如 图 12.34 所 示 。 


< 一 一 I be http://localhost:8080/ rmysite/tast,htrm 


2017 
ed W3C 的 “战略 漏斗 ” (Strategy Funnel) : 和 常态 化 探索 创 Web 技 术 新 想法 


2017 年 6 日 8 日 ，W3C 的 未 未 此 曲 方 向 名 焉 人 Wendy Sejtzar 点 布展 客 广 章 ， 刘 知 了 W3C 的 战 瞳 方向 意见 及 研 计 云 流 栅 制 战 瞳 


， 小 技术 社区 中 听取 关于 未 未 准 与 战略 方向 的 意见 和 建议 。 这 些 机 提包 括 与 会 员 的 讨论 ， 与 其 他 


二 。 从 这 些 尝 关中， 我 们 了 和 解 到 许多 好 的 想法 ，W3C 的 战 归 团队 


图 12.34 设计 正文 内 容 页 


| 【操作 步骤 】 
第 1 步 ， 新 建 HTMLS 文档 ， 构 建 页 面 结构 。 


<div class="box"> 
<hl>W3C 的 “战略 漏斗 ”(Strategy Funnel): 常态 化 探索 创 Web 技术 新 想法 </h1> 
<p>2017 年 6 月 8 日 ，W3C 的 未 来 战略 方向 负责 人 Wendy Seltzer 发 布 博 客 文章 ， 介 绍 了 W3C 的 战略 
方 回 意见 及 研讨 交流 机 制 一 一 战略 漏斗 〈Strategy funnel)。</p> 
<p>...</p> 
<p class"right"> 更 多 <a hre 合 "http:/Awww.chinaw3c.org/archives/1844/ target="” blank"> 详 细 内 容 </a></p> 
</div> 


第 2 步 ， 新 建 内 部 样式 表 ， 设 计 页 面 初 始 化 和 包含 框 的 样式 。 


<style type="text/css"> 

body {* 页 面 初始 化 */ 
background-color: #454545; 
margin: lem; padding:0; 


| } 
.box {/* 设 计 包含 框 样式 */ 


border-radius: 10px: 诺 设 计 圆 角 */ 
box-shadow: 0 0 12px lpx rgba(205, 205, 205, 1): 谍 设 计 栏 目 阴 影 */ 


border: 1px solid black: 
padding: 10px: margin: 24px auto; 
| width: 90%; 
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text-shadow: black 1px 2px 2px; ” 沪 设 计 包 含 文本 阴影 */ ] 


color: white: | 

谍 设 计 直 线 渐 变 背 景 */ | 

background-1mage: linear-gradient(to bottom, black, rgba(0, 47, 94, 0.4)); ] 

background-color: rgba(43, 43, 43, 0.5); | EE 
第 3 步 ， 设 计 鼠 标 经 过 时 ， 放 大 阴影 亮度 。 Note 


.box:hover {box-shadow: 0 0 12px Spx rgba(205, 205, 205, 1);} 


第 4 步 ， 设 计 标题 样式 。 在 标题 正文 前 面 使 用 content 生成 一 个 日 期 图 标 。 ] 


hl { | 

font-size: 1209%6; font-weight: bold: | 
text-decoration: underline: | 
margin-bottom:34px:; | 


} 
上 # 在 标题 前 面 添加 额外 内 容 状 | 
hl:before {content: url(images/date.png); position:relative; top:16px; margin-right: 12px:;:} 


第 5 步 ， 设 计 正 文 段落 样式 。 调 整 段 落 文 本 的 行 高 、 间 距 ， 定 义 字 体 大 小 和 首 行 缩 进 显示 。 | 


pi | 
padding: 6px; 
text-indent:2em:; 
line-height: 1.8em:; font-size:14px:; | 
} | 
ee 
12.5.2 ”设计 应 用 表面 RE 


本 例 利 用 CSS3 新 增 的 边框 和 背景 样式 来 模拟 Windows 7 界面 效果 ， 主 要 应 用 了 box-shadow、 视频 讲 入 
border-radius、text-shadow、border-color、border-image 等 属性 ， 同 时 还 用 到 了 渐变 设计 属性 。 整 个 案 
例 的 演示 效果 如 图 12.35 所 示 。 | 


门 lccahos/rmysite/tes:,.ht x 


”~ © OD localhost/mysitertest.html 


证 策 洲 作 8] 尼 谨 司 风 … 


图 12.35 设计 Windows 7 界面 效果 
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【操作 步骤 】 
第 1 步 ， 新 建 HIML5 文档 ， 设 计 页 面 结构 。 整 个 UI 界面 的 结构 比较 简单 ， 说 明 如 下 : 


<div 1d="desktop"> 
<div 1d="bgWindow" class="window secondary"> 
<span> 对 话 框 </span> 
<div class="content"></div> 
</div> 
<div 1d="frontWindow" class="window"> 
<span> 用 户 反 馈 </span> 
<div id="winInput"><input type="text" value=" 姓 名 "><input type="text" value=" 联 系 方式 "></div> 
<div id="winContent" class="content"> 请 输入 你 的 反馈 意见 ……</div> 
</div> 
<div 1d="startmenu"> 
<button id="winflag"> 开 始 </button> 
<span id="toolBtn"><!-- 任 务 栏 图 标 --> 
<button class="application"> 写 </button> 
<button class="application"> 米 </button> 
<button class="application"> 尝 </button> 
<button class="application">@®@</button> 
</span> 
</div> 
</div> 


第 2 步 ， 设计 困 面 效果 。 在 文档 样式 表 中 ， 先 定制 页 面 样式 ,然后 设置 果 面 显示 背景 样式 代 码 


”如 下 : 


html,body { /* 页 面 样式 定制 ， 清 除 边 距 ， 显 式 定义 高 度 */ 
padding:0; margin:0; 
height: 100%; 


} 
#desktop { /* 定 制 吕 面 背 景 效果 */ 
backeground: #2c609b; 
height: 100%%; /# 满 窗口 显示 部/ 
font: 12px "Segoe UI", Tahoma, sans-serif; 
position: relative: 诺 定 义 包含 框 ， 为 后 面 的 提 面 定位 元 素 提 供 参 考 */ 
/# 定 义 桌面 内 阴影 ， 使 用 一 组 3 个 内 阴影 设计 梦幻 效果 所 
box-shadow: inset 0 -200px 100px #032b5c, 
inset -100px 100px 100px #2073b5, 
inset 100px 200px 100px #1f9bb]1:; 
overflow: hidden: 访 隐 藏 超出 的 内 容 */ 
} 


第 3 步 ， 设 计 开始 妆 单 和 任务 栏 。 开 始 沫 单 和 任务 栏 主要 用 到 了 圆 角 样式 和 盒子 阴影 ， 在 设计 任务 


， 栏 中 的 图 标 时 ， 还 用 到 渐变 效果 ， 该 技术 将 在 后 面 章节 中 进行 详细 说 明 ， 该 部 分 的 样式 代码 如 下 : 


#startmenu { /* 设 置 任务 栏 效 果 */ 
谍 固 定 显 示 在 页面 底部 */ 
position: absolute; bottom: 0; 
旋回 定 大 小 */ 
height: 40px; width: 100%: 
background: reba(178, 215, 255, 0.25): 谍 增 加 半 透 明 效 果 */ 
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尾 为 任务 栏 设计 顶部 外 阴影 ， 以 及 在 内 部 添加 两 道 阴 影 效 果 状 
box-shadow: 0 -2px 20px Tgba(0, 0, 0, 0.25), 

inset 0 1px #042754, 

Inset 0 2px #5785Sb0; 
overflow: hidden: ] 生 


} 
#startmenu button { 


font-size: 1.6em: color: #fff: 
text-shadow: 1px 2px 2px #00294b: 诺 为 按钮 文字 增加 阴影 效果 */ 


vote 


} 
#startmenu #winflag { * 设 计 “ 开 始 ” 按 钮 样式 */ 
float: left: 
margin: 2px; margin-right: 10px; 
height: 34px; width: 80px: 
border: none: 
backeround: #034a76; 
谍 设 计 “ 开 始 ” 按 钮 圆 角 显示 */ 
border-radius: 40px: 
谍 设 计 “ 开 始 ” 按 钮 内 外 阴影 特效 */ 
box-shadow: 0 0 1px #f{f. 
0 0 3px #000, 
0 0 3px #000, 
inset 0 1px #fff, 
inset 0 12px rgba(255, 255, 255, 0.15), 
Inset 0 4px 10px #cef, 
inset 0 22px Spx #0773b4, 
inset 0 -Spx 10px #0df: 
} 
#startmenu .application { /# 设 计 任 务 栏 图 标 样式 类 
position: relative; 
bottom: 1px; height: 38px; width: $2px; 
backeground: reba(14, 59, 103, 0.25): 
border: 1px solid rgba(0, 0, 0, 0.8): 
谍 设 计 渐 变 特效 */ 
transition: .3s all: 
谍 设 计 任 务 栏 图 标 圆 角 显示 */ 
border-radius: 4px:; 
谍 设 计 任务 栏 图 标 内 外 阴影 特效 */ 
box-shadow: Inset 0 0 1px #fff, 
inset 4px 4px 20px rgba(255, 255, 255, 0.33), 
Inset -2px -2px 10px rgba(255, 255, 255, 0.25); 


} 

从 设计 鼠标 经 过 时 ， 图 标 显示 为 半 透 明 的 色彩 变化 效果 关 

#startmenu .application:hover {background-color: reba(255, 255, 255, 0.25);} 

第 4 步 ， 设 计 窗 口 效果 。 窗 口 UI 主要 涉及 圆 角 和 半 透 明 效 果 设 计 ， 样 式 代 码 如 下 : 
人/# 设 计 窗 口外 框 效果 状 


.Window { 
谍 定 位 窗 体 大 小 和 位 置 */ 
position: absolute: 
left: 1S0px: top: 7Spx: 
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width: 400px: height: 400px: padding: 7px:; 
谍 设 计 半 透明 效果 的 边框 和 背景 效果 */ 
border: 1px solid reba(255, 255, 255, 0.6); 
background: reba(178, 215, 255, 0.75); 
谍 设 计 窗 体外 框 圆 角 显示 */ 
border-radius: 8px: 
谍 设 计 窗 体外 框 的 外 阴影 特效 */ 
box-shadow: 0 2px 16px #000, 

0 0 lpx #000, 

0 0 lpx #000; 
谍 设 计 坚 边 效果 */ 
text-shadow: 0 0 1Spx #fff, 0 0 1Spx #fff: 


-Window span {display: block:} 
.Window input { /* 文 本 输入 框 样式 */ 
谍 设 计 文 本 输入 框 圆 角 显 示 */ 
border-radius: 2px; 
谍 设 计 文 本 输入 框 的 内 外 阴影 特效 */ 
box-shadow: 0 0 2px #f{f, 
0 0 lpx #f{, 
inset 0 0 3px #ff: 
} 
-Window Input + Input {margin-left: 12px:} 
.Window.secondary { /* 定 位 第 二 个 窗 体位 置 和 不 透明 度 */ 
left: 300px: top: 125px; opacity: 0.66: 
} 
.Window.secondary span {margin-bottom: 8Spx;} 
.Window .content {/* 设 计 窗 口内 文本 区 域 样式 */ 
padding: 10px; height: 279px; 
backeground: #fff: border: 1px solid #000; 
虚设 计 文本 区 域 圆 角 显示 */ 
border-radius: 2px: 
谍 设 计 文 本 区 域 的 内 外 阴影 特效 */ 
box-shadow: 0 0 Spx #fff., 
0 0 1px #f{, 
Inset 0 1px 2px #aaa; 
text-shadow: none: /* 取 消 文 本 阴影 */ 


12.6 人 在线 练习 


本 节 专 题 练习 CSS3 的 用 户 界 面 特性 ， 感 兴趣 的 读者 可 以 扫 码 练习 。 


。 3306。 


= = 


用 是 


设计 CSS3 动画 


CSS3 动画 包括 过 渡 动 画 和 关键 帧 动画 ， 它 们 主要 通过 改变 CSS 属性 值 来 模拟 实现 。 本 
章 将 详细 介绍 Transform、Transitions 和 Animations 三 类 功能 模块 ， 其 中 Transform 实现 对 网 
页 对 象 的 变形 操作 ，Tiransitions 实现 CSS 属性 过 渡 朗 化 ，Animations 实现 CSS 样式 分 步 式 
演示 效果 。 


【 学 习 重 点 】 


| 


于 于 于 


设计 对 象 变形 操作 ，。 

设计 过 渡 样 式 。 

设计 关键 帧 动画 。 

能 够 灵活 使 用 CSS3 动画 设计 页 面 特 效 。 


13.1.1 认识 Transform 


13.1 CSS3 变形 


2012 年 9 月 ，W3C 发 布 了 CSS3 变形 工作 草案 。CSS3 变形 允许 CSS 把 元 素 转变 为 2D 或 3D 空 
间 ， 这 个 草案 包括 CSS3 2D 变形 和 CSS3 3D 变形 。 a 
权威 参考 : http://www.w3.org/TR/css-transforms-1/。 


CSS3 变形 是 多 种 效果 的 集合 ， 如 旋转 、 缩 放 、 平 移 和 倾斜 等 ， 每 个 效果 都 被 称 为 变形 图 数 ， 它 


， 们 可 以 操控 元 素 发 生 旋转 、 缩 放 、 平移 和 倾斜 等 变化 。 在 CSS3 之 前 , 实现 类 似 的 效果 需要 图 片 、Flash 


或 JavaScript 才能 完成 。 而 使 用 CSS 来 完成 这 些 变形 则 无 须 加 载 额 外 的 文件 ， 提 高 了 开发 效率 和 页 面 


”的 执行 效率 。 


CSS3 变形 包括 3D 变形 和 2D 变形 , 3D 变形 使 用 基于 2D 变形 的 相同 属性 , 如 果 了 解 了 2D 变形 ， 
会 发 现 3D 变形 与 2D 变形 的 功能 类 似 。 
CSS 2D Transform 获得 了 各 主流 浏览 器 的 支持 , 但 是 CSS 3D Transform 支持 程度 不 是 很 完善 。 考 


”上 谍 到 浏览 占 兼 容 性 ，3D 变形 在 实际 应 用 时 应 添加 私有 属性 ， 并 且 个 别 属性 在 菜 些 主流 浏览 器 中 并 未 
得 到 很 好 的 支持 ， 简 单 说 明 如 下 : 


加 ”在 下 10+ 中 ，3D 变形 部 分 属性 未 得 到 很 好 的 支持 。 

Firefox10.0 至 Firefox15.0 版 本 的 浏览 器 ， 在 使 用 3D 变形 时 需要 添加 私有 属性 -moz-， 但 从 
Firefox16.0+ 版 本 开始 无 须 添加 浏览 器 私有 属性 。 

Chrome12.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 

Safari4.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 

Operal5.0+ 版 本 才 开 始 支 持 3D 变形 ， 使 用 时 需要 添加 私有 属性 -webkit-。 

移动 设备 中 iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile24.0+、 
Chrome for Android25.0+ 都 支持 3D 变形 , 但 在 使 用 时 需要 添加 私有 属性 -webkit-; Firefox for 
Android19.0+ 文 持 3D 变形 ， 且 无 须 添 加 浏览 器 私有 属性 。 


13 1 2 设置 原点 
CSS 变形 的 原点 默认 为 对 象 的 中 心 点 〈50% 50%)， 使 用 transform-origin 属性 可 以 重新 设置 变形 


有 多 


| 原点。 语法 格式 如 下 : 


transform-origin: [<percentage> | <length> | left | center(1) |right] [<percentage> | <length> | top | center2) | bottom]? 
取 值 简单 说 明 如 下 。 

<percentage>: 用 百分比 指定 坐标 值 。 可 以 为 负 值 。 

<length>: 用 长 度 值 指定 坐标 值 。 可 以 为 负 值 。 

left: 指定 原点 的 模 坐 标 为 left。 

center(): 指定 原点 的 横 坐 标 为 center。 

right: 指定 原点 的 横 坐 标 为 right。 

top: 指定 原点 的 纵 坐 标 为 top 。 


四 加 网 辐 名 名 
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回 center): 指定 原点 的 纵 坐 标 为 center。 
bottom: 指定 原点 的 纵 坐 标 为 bottom。 


【示例 】 通 过 重 置 变形 原点 ， 可 以 设计 不 同 的 变形 效果 。 在 下 面 示 例 中 以 图 像 的 右上 角 为 原点 逆 


时 针 旋 转 图 像 45”， 则 比较 效果 如 图 13.1 所 示 。 


<style type="text/css"> 
img {* 固 定 两 幅 图 像 相同 大 小 和 相同 显示 位 置 */ 
position: absolute: 
left: 20px;: 
top: 10px; 
width: 170px: 
width: 250px: 


} 

img.bg {/* 设 置 第 1 幅 图 像 作为 参考 */ 
opacity: 0.3; 
border: dashed 1px red; 


} 
img.change {/* 变 形 第 2 幅 图 像 */ 
border: solid 1px red: 


transform-origin: top Tight: 旋 以 右上 角 为 原点 进行 变形 */ 
transform: rotate(-45deg): /# 逆 时 针 旋 转 45”*/ 

} 

</style> 


<lmg class="bg" src="i1mages/1.jpg"> 
<lmg class="change" src="i1mages/1.jpg"> 


[1 localhost:38080/mysite, x Wn 


GC | © localhost:3080/mysite/test.html 


图 13.1 自 定义 旋转 原点 
13.1.3 ”2D 旗 转 


rotate() 函 数 能 够 在 2D 空间 内 旋转 对 象 ， 语 法 格式 如 下 : 
rotate(<angle>) 


其 中 参数 angle 表示 角度 值 ， 取 值 单位 可 以 是 : 度 ， 如 90deg (90 度 , 一 圈 360 度 ); 梯度 ， 如 | 
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13.1.4 ”2D 缩放 


“所 示 。 
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”100grad (相当 于 90 度 ，360 度 等 于 400grad); 弧度 ， 如 1.57rad ( 约 等 于 90 度 ，360 度 等 于 2x); 轿 ， 
如 0.2$tum 〈 等 于 90 度 ，360 度 等 于 ltum )。 
【示例 】 以 13.1.2 节 示 例 为 基础 ， 下 面 按 默 认 原 点 逆 时 针 旋 转 图 像 45° 
img.change { 
border: solid 1px red: 
transform: rotate(-4Sdeg); 


， 效 果 如 图 13.2 所 示 。 


DD localhost8080/mysite! x 


C Oo 


图 13.2 定义 旋转 效果 


scale0 函 数 能 够 缩放 对 象 大 小 ， 语 法 格式 如 下 : 
scale(<number>[, <number>]) 


该 图 数 包 含 两 个 参数 值 ， 分 别 用 来 定义 宽 和 高 缩放 比例 ， 取 值 简 单 说 明 如 下 。 
加 ”如 果 取 值 为 正 数 ， 则 基于 指定 的 宽度 和 高 度 放 大 或 缩小 对 象 。 
如 果 取 值 为 负数 ， 则 不 会 缩小 元 素 ， 而 是 翻转 元 素 〈 如 文字 被 反 转 )， 然 后 再 缩放 元 素 。 
加 ”如果 取 值 为 小 于 1 的 小 数 〈 如 0.5)， 可 以 缩小 元 素 。 
加 ”如果 第 二 个 参数 省 略 ， 则 第 二 个 参数 等 于 第 一 个 参数 值 。 
【示例 】 以 13.1.2 节 示 例 为 基础 ， 下 面 按 均 认 原点 把 图 像 缩小 为 原来 的 二 分 之 一 ， 效 果 如 图 13.3 
Img.change { 
border: solid 1px red: 


transform: scale(0.5); 
} 


3 1315 2D 平移 


translate(0) 函 数 能 够 平移 对 象 的 位 置 ， 语 法 格式 如 下 : 


translate(<translation-value>[, <translation-value>]) 


。 340。 


图 13.3 ”缩小 对 象 效果 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 X 轴 和 YY 轴 相 对 于 原点 的 偏 移 距 离 。 如 果 省 略 参 | 
数 ， 则 默认 值 为 0。 如 果 取 负 值 ， 则 表示 反问 偏 移 ， 参 考 原 点 保持 不 变 。 | 
【示例 】 下 面 示例 设计 向 右 下 角 方向 平移 图 像 ， 其 中 X 轴 偏 移 130px，Y 轴 偏 移 50px， 演 示 效 
果 如 图 13.4 所 示 。 ] 


img.change { | 
border: solid 1px red: | 
transform: translate(150px, S0pxX); ] 
} | 
口 localhost:8080/mysite’ x | 
G | @ localhost8080/mysite/test.htm 
| 
] 
图 13.4 平移 对 象 效果 1 
pe 
13.1.6 ”2D 倾斜 和 
skew0 〇 函数 能 够 倾斜 显示 对 象 ? 语法 格式 如 下 : 
skew(<angle> [, <angle>]) 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 X 轴 和 Y 轴 倾 斜 的 角度 。 如 果 省 略 参数 ， 则 默认 ， 
值 为 0。 与 rotate0 函 数 不 同 ，rotate0 函 数 只 是 旋转 对 象 的 角度 ， 而 不 会 改变 对 象 的 形状 ;skew0 函 数 
会 改变 对 象 的 形状 。 / 


| 
| 
Se 
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【示例 】 下 面 示例 使 用 skewO 函 数 变形 图 像 ，X 轴 倾 斜 30”，Y 轴 倾 斜 20” ， 效 果 如 图 13.5 所 示 。 
Img.change { 
border: solid 1px red: 
transform: skew(30deg, 20deg): 


B localhost:8080/mysite, x 


图 13.5 倾斜 对 象 效果 


织品 13.1.7 2D 矩阵 


matrixO 是 一 个 矩阵 函数 ， 它 可 以 同时 实现 缩放 、 旋 转 、 平 移 和 倾斜 操作 ， 语 法 格式 如 下 : 
matrix(<number>, <number>, <number>, <number>, <number>, <number>) 
该 函数 包含 6 个 值 ， 具 体 说 明 如 下 : 
第 1 个 参数 控制 X 轴 缩 放 。 
第 2 个 参数 控制 X 轴 倾 斜 。 
第 3 个 参数 控制 Y 轴 倾 斜 。 
第 4 个 参数 控制 Y 轴 缩 放 。 
第 5 个 参数 控制 X 轴 和 平移。 
第 6 个 参数 控制 Y 轴 和 平移 。 
【示例 】 下 面 示 例 使 用 matrix0 函 数 模拟 13.1.6 节 示 例 的 倾斜 变形 操作 ， 效 果 类 似 图 13.5 所 示 。 
Img.change { 
border: solid 1px red: 
transform: matrix(]1, 0.6, 0.2, 1, 0, 0): 


上 办 欠 多 全 的 


} 


【补充 】 
多 个 变形 函数 可 以 在 一 个 声明 中 同时 定义 。 例 如 : 
dv { 
transform: translate(80, 80); 
transform: rotate(4Sdeg); 


transform: scale(1.5, 1.5); 
} 
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针对 上 面 样式 ， 可 以 简化 为 : 
div {transform: translate(80, 80) rotate(4Sdeg) scale(1.5, 1.5):} 


13.1.8 设置 变形 类 型 国会 肌 


CSS3 变形 包括 2D 和 3D 两 种 类 型 ， 使 用 transform-style 属性 可 以 设置 CSS 变形 的 类 型 ， 语 法 格 ”国有 /7 有 到 
式 如 下 : | 


transform-style: flat | preserve-3d 


Te 
FT 中 
让: 


取 值 简单 说 明 如 下 。 了 Sir 
flat: 指定 子 元 素 在 该 元 素 所 在 平面 内 进行 变形 ， 即 2D 平面 变形 ， 为 默认 值 。 | 视频 讲解 


加”preserve-3d: 指定 子 元 素 定 位 在 三 维 空间 内 进行 变形 ， 即 3D 立体 变形 。 ] 
【示例 】 借 助 上 面 示例 ， 下 面 示例 使 用 <div id="box"> 容 器 包 庄 两 幅 图 像 ， 改 进 后 的 HTML 结构 
如 下 : 


<div 1d="box"> 
<1mg class="bg" src="i1mages/]1.Jjpg"> 
<img class="change" src="images/1.jpg"> 
</div> 
为 <div id="box"> 容 器 设置 CSS3 变形 类 型 为 3D， 样 式 代码 如 下 : 


#box { 
transform-style: preserve-3d.; 
} 
为 change 图 像 应 用 3D 顺 时 针 旋 转 45”，CSS 样式 如 下 : 
Img.change { 
border: solid 1px red: 
transform: translate3d(60px, 60px, 400px); 
} 


在 浏览 右 中 预览 ， 效 果 如 图 13.6 所 示 。 


DD Ilocalhost8080/mysite，X 


图 13.6 3D 平移 效果 
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13.1.9 设置 透视 距离 和 原点 


3D 变形 与 2D 变形 最 大 的 不 同 就 在 于 其 参考 的 坐标 轴 不 同 : 2D 变形 的 坐标 轴 是 平面 的 ， 只 存在 
X 轴 和 立轴 ， 而 3D 变形 的 坐标 轴 则 是 X、Y、2Z 轴 组 成 的 立体 空间 ，X 轴 正 辐 、Y 轴 正 同 、Z 轴 正 
回 分 别 朝 同 右 、 下 和 屏幕 外 ， 示 意 如 图 13.7 所 示 。 

透视 是 3D 变形 中 最 重要 的 概念 。 如 果 不 设置 透视 ， 元 素 的 3D 变形 效果 将 无 法 实现 。 在 13.1.8 
节 示 例 中 ， 如 果 使 用 函数 rotateX(45deg) 将 图 像 以 X 轴 方 辐 为 轴 沿 顺 时 针 旋 转 45”， 由 于 没有 设置 透 
视 样式 的 效果 ， 可 以 看 到 浏览 器 将 图 像 的 3D 变形 操作 垂直 投射 到 2D 视 平面 上 ， 最 终 呈 现 出 来 的 只 
是 图 像 的 宽 高 变化 。 

【示例 1】 在 13.1.8 节 示 例 基础 上 ， 在 <div id="box"> 容 器 外 设置 透视 点 距离 为 1200px， 样 式 
代码 如 下 : 

body{ 


perspective: 1200px:; 
} 


在 浏览 右 中 可 以 看 到 如 图 13.8 所 示 的 变形 效果 。 


DB localhost:8080/mysits, x 


| | © localhost:3080/mysite/test1.html 


图 13.7 3D 坐标 轴 示 意图 图 13.8 沿 和 轴 3D 旋转 45” 效 果 图 
基于 对 上 面 示例 的 直观 体验 ， 下 面 来 了 解 儿 个 核心 概念 : 变形 元 素 、 观 察 者 和 被 透视 元 素 ， 三 者 
关系 如 图 13.9 所 示 。 
变形 元 素 : 需要 进行 3D 变形 的 元 素 。 主 要 设置 transform、 transform-origin、backface-visibility 
等 属性 。 


回 ”观察 者 : 浏览 器 模拟 出 来 的 用 来 观察 被 透视 元 素 的 一 个 没有 尺寸 的 点 ， 观 察 者 发 出 视线 ， 类 
似 于 一 个 点 光源 发 出 光线 。 
加 ”被 透视 元 素 : 被 观察 者 观察 的 元 素 ， 根 据 属 性 设置 的 不 同 ， 有 可 能 是 变形 对 象 本 身 ， 也 可 能 
是 它 的 父 级 或 祖先 元 素 ， 主 要 设置 perspective、perspective-origin 等 属性 。 
1. 透视 距离 
透视 距离 是 指 观 察 者 沿 着 平行 于 Z 轴 的 视线 与 屏幕 之 间 的 距离 ， 也 称 为 视 距 ， 示 意图 如 图 13.10 
所 示 。 
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被 观察 的 元 素 ( 绿 ) 


屏幕 ( 灰 ) 
变形 元 素 最 终 呈现 效果 ( 红 ) 


Y 轴 


观察 者 可 移动 区 域 ( 黄 ) 


Z 轴 


图 13.9 ”变形 元 素 、 观 察 者 和 被 透视 元 素 位 置 关 系 示意 图 
X 轴 


屏幕 ( 灰 ) 


立轴 


Z 轴 多 观察 者 


图 13.10 ”透视 距离 示意 图 
使 用 perspective 属性 可 以 定义 透视 距离 ， 语 法 格式 如 下 : 
perspective: none | <length> 
取 值 简单 说 明 如 下 。 
四 none: 不 指定 透视 。 


回 ”<length>: 指定 观察 者 距离 平面 的 距离 ， 为 元 素 及 其 内 容 应 用 透视 变换 。 


< 人 注意 : 透视 距离 不 可 为 0 和 负数 ， 因 为 观察 者 与 屏幕 距离 为 0 时 或 者 在 屏幕 背面 时 是 不 可 以 观察 
到 被 透视 元 素 的 正面 的 。perspective 也 不 可 取 百 分 比值 ， 因 为 百分比 值 需 要 相对 的 元 素 ， 


但 Z 轴 并 没有 可 相对 的 元 素 尺寸 。 


一 般 地 ， 物 体 离 得 越 远 ， 显 得 越 小 。 反 映 在 perspective 属性 上 ， 就 是 该 属性 值 越 大 ， 元素 


的 3D 变形 效果 越 不 明显 。 


设置 perspective 属性 的 元 素 就 是 被 透视 元 素 。 一 般 地 ,该 属性 只 能 设置 在 变形 元 素 的 父 级 
或 祖先 级 。 因 为 浏览 器 会 为 其 子 级 的 变形 产生 透视 效果 , 但 并 不 会 为 其 自身 产生 透视 效果 。 


应 用 示例 可 以 参考 上 面 示例 1。 
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2. 透视 原点 
透视 原点 是 指 观察 者 的 位 置 ， 一 般 观 察 者 位 于 与 屏幕 平行 的 另 一 个 平面 上 , 观察 者 始终 是 与 屏幕 


垂直 的 。 观 察 者 的 活动 区 域 是 被 观察 元 素 的 盒 模型 区 域 ， 示 意图 如 图 13.11 所 示 。 


X 轴 


被 观察 的 元 素 ( 绿 ) 


屏幕 ( 灰 ) 


Y 轴 


wp 观察 者 可 移动 区 域 ( 黄 ) 


图 13.11 ”透视 原点 的 位 置 区 域 
使 用 perspective-origin 属性 可 以 定义 透视 点 的 位 置 ， 语 法 格式 如 下 : 
perspective-origin: [<percentage> | <length> | left | centerCD | right] [<percentage> | <length> | top | centerC) | bottom]? 
取 值 简单 说 明 如 下 。 
<percentage>: 用 百分比 指定 透视 点 坐标 值 ， 相 对 于 元 素 宽 度 。 可 以 为 负 值 。 
<length>: 用 长 度 值 指定 透视 点 坐标 值 。 可 以 为 负 值 。 
left: 指定 透视 点 的 横 坐 标 为 left。 
center(): 指定 透视 点 的 横 坐 标 为 center。 
right: 指定 透视 点 的 横 坐 标 为 Tight。 
top: 指定 透视 点 的 纵 坐 标 为 top。 
centerG@): 指定 透视 点 的 纵 坐 标 为 center。 
bottom: 指定 透视 点 的 纵 坐 标 为 bottom。 
【示例 2】 在 示例 1 基础 上 上， 设置 观察 点 在 右 侧 居 中 位 置 ， 则 显示 效果 如 图 13.12 所 示 。 


bodyt 
perspective: 1200px; 
perspective-origin: Tlght: 


上 人 办 凶 多 的 


} 
13.1.10 3D 平移 
3D 平移 主要 包括 下 面 4 个 函数 。 


加 ”translatex(<translation-value>): 指定 对 象 X 轴 (水 平方 辐 ) 的 平移 。 
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D localhost8080/mysite x 同和 


一 Es | © localhost:8080/mysite/test2.html 


图 13.12 设置 观察 点 位 置 在 右 侧 效果 


translatey(<translation-value>): 指定 对 象 Y 轴 (垂直 方 同 的 平移 。 
translatez(<length>): 指定 对 象 Z 轴 的 平移 。 
translate3d(<translation-value>,<translation-value>,<length>): 指定 对 象 的 3D 平移。 第 1 个 参 
数 对 应 义 轴 ， 第 2 个 参数 对 应 立轴 ， 第 3 个 参数 对 应 Z 轴 ， 参 数 不 允 许 省 略 。 
参数 <translation-value> 表 示 <length> 或 <percentage>， 即 X 轴 和 YY 轴 可 以 取 值 长 度 值 或 百分比 ， 
但 是 Z 轴 只 能 够 设置 长 度 值 。 
【示例 】 下 面 示例 设计 图 像 在 3D 空间 中 平移 ， 形 成 一 种 错位 效果 ， 如 图 13.13 所 示 。 


四 加 辐 


#box { | 
transform-style: preserve-3d.; | 
perspective: 1200px; | 

} ] 

img.change { ] 
border: solid 1px red: 
transform: translate3d(200px, 30px, 60px); 

} 


[| localhost:8080/mysite, x 最 


所 GO localhost:8080/mysite/test.html 


图 13.13 定义 3D 平移 效果 
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从 图 13.13 效果 可 以 看 出 ， 当 Z 轴 值 越 大 时 ， 元 素 离 浏览 者 越 近 ， 从 视觉 上 元 素 就 变 得 更 大 ; 反 
' 之 ， 其 值 越 小 时 ， 元 素 也 离 观 看 者 越 远 ， 从 视觉 上 元 素 就 变 得 更 小 。 

| 全 提示 : translateZ() 逻 数 在 实际 使 用 中 等 效 于 translate3d(0,0,tz)。 仅 从 视觉 效果 上 看 ，translateZ0 
和 translate3d(0.0,tz) 函 数 功能 非常 类 似 于 二 维 空间 的 scale(0) 缩 放 浮 数 , 但 实际 上 完全 不 同 。 
translateZ0 和 translate3d(0.0,tz) 变 形 是 发 生 在 乙 轴 上 ， 而 不 是 在 X 轴 或 了 轴 。 


法 ”13.1.11 3D 缩放 


3D 缩放 主要 包括 下 面 4 个 函数 。 
scalex(<number>): 指定 对 象 X 轴 的 〈 水 平方 回 ) 缩放 。 
scaley(<number>): 指定 对 象 Y 轴 的 (垂直 方 同 ) 缩放 。 
scalez(<number>): 指定 对 象 的 Z 轴 缩 放 。 
scale3d(<number>,<number>,<number>): 指定 对 象 的 3D 缩放 。 第 1 个 参数 对 应 X 轴 ， 第 2 
个 参数 对 应 立轴 ， 第 3 个 参数 对 应 Z 轴 ， 参 数 不 允 许 省 略 。 
参数 <number> 为 一 个 数字 ， 表 示 缩 放 倍数 ， 可 参考 2D 缩放 参数 说 明 。 
【 示例】 下面 以 13.1.10 节 示 例 为 基础 ， 在 XX 轴 和 YY 轴 放 大 图 像 1.5 倍 ，Z 轴 放 大 图 像 2 倍 ， 然 
| 后 使 用 translatex() 把 变形 的 图 像 移 到 右 侧 显示 ， 以 便 与 原 图 进行 比较 ， 演 示 效 果 如 图 13.14 所 示 。 
imgchange { 
border: solid 1px red: 
transform: scale3D(1.5,1.5,2) translatex(240px); 


办 多 的 


癌 localhost8080/mysite’ Xx 


| 图 13.14 定义 3D 缩放 效果 
对 ?13.1.12 ”3D 旋转 
3D 旋转 主要 包括 下 面 4 个 函数 。 


rotatex(<angle>): 指定 对 象 在 X 轴 上 的 旋转 角度 。 
回 ”rotatey(<angle>): 指定 对 象 在 Y 轴 上 的 旋转 角度 。 
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回 rotatez(<angle>): 指定 对 象 在 Z 轴 上 的 旋转 角度 。 


rotate3d(<number>,<number>,<number>,<angle>): 指定 对 象 的 3D 旋转 角度 ， 其 中 前 3 个 参 | 


数 分 别 表 示 旋 转 的 方向 X、Y、Z， 第 4 个 参数 表示 旋转 的 角度 ， 参 数 不 允许 省 略 。 


会 提示 : rotate3dO 函 数 前 3 个 参数 值 分 别 用 来 描述 围绕 义 、Y、Z 轴 旋 转 的 矢量 值 。 最 终 变 形 元 素 / 


以 由 (0,0,0) 和 (x,y,z) 这 两 个 点 构成 的 直线 为 轴 ， 进 行 旋转 。 当 第 4 个 参数 为 正 数 时 ， 元 素 
进行 顺 时 针 旋 转 ; 当 第 4 个 参数 为 负数 时 ， 元 素 进行 逆 时 针 旋 转 。 

rotate3d0) 遂 数 可 以 与 前 面 3 个 旋转 函数 进行 转换 ， 简 单 说 明 如 下 : 

四 rotatex(a) 函 数 功 能 等 同 于 rotate3d(1,0,0,a)。 

回 rotatey(a) 函 数 功 能 等 同 于 rotate3d(0,1,0,a)。 

四 rotatez(a) 函 数 功能 等 同 于 rotate3d(0,0,1,a)。 


【示例 】 以 13.1.1 节 示 例 为 基础 ， 使 用 rotate3d0 困 数 顺 时 针 旋 转 图 像 43”， 其 中 X 轴 、Y 轴 和 | 


Z 轴 数 值 分 别 为 2>、2、1， 效 果 如 图 13.15 所 示 。 


Img.change { 
border: solid 1px red: 
transform: rotate3d(2,2,1,45deg); 


} 


襄 localhost:8080/mysite, x 


€ © | @ localhost8080/mysite/test.htm 


/ De 


图 13.15 定义 3D 旋转 效果 
13.1.13 ”透视 函数 


回 
perspective 属性 可 以 定义 透视 距离 ， 它 应 用 在 变形 元 素 的 父 级 或 祖先 级 元 素 上 。 而 透视 函数 | 


perspectiveO 是 transform 变形 函数 的 一 个 属性 值 ， 可 以 应 用 于 变形 元 素 本 身 。 有 具体 语法 格式 如 下 : 
perspective(<length>) 
参数 是 一 个 长 度 值 ， 值 只 能 是 正 数 。 
【示例 】 下 面 示例 设计 图 像 在 义 轴 上 旋转 120”， 透 视 距离 为 180px， 如 图 13.16 所 示 。 
#box {transform-style: preserve-3d:} 


Img.change { 
border: solid 1px red: 
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口 localhost:8080/mysite, Xx 


和 G | @ localhost:8080/mysite/test.htm 


图 13.16 定义 3D 旋转 效果 


< 人 注意 : 由 于 transform 属性 是 从 前 向 后 的 顺序 解析 属性 值 的 ， 所 以 一 定 要 把 perspective0 函 数 写 在 


其 他 变形 函数 前 面 ， 否 则 将 没有 透视 效果 。 

由 于 透视 原点 perspective-origin 只 能 设置 在 设置 了 perspective 透视 属性 的 元 素 上 ， 若 为 元 
素 设 置 透 视 函 数 perspective(0)， 则 透视 原点 不 起 作用 ， 观 察 者 使 用 默认 位 置 ， 即 元 素 中 心 
点 对 应 的 平面 上 。 


_ 13.1.14 ”变形 原点 


2D 变形 原点 由 于 没有 Z 轴 ， 所 以 Z 轴 的 值 默 认为 0。 在 3D 变形 原点 中 , Z 乙 轴 是 一 个 可 以 设置 的 


”变量 。 语 法 格式 如 下 : 


transform-origin: X 轴 立轴 Z 轴 

取 值 简单 说 明 如 下 。 

加 X 轴 : left | center | Tight | <length> | <percentage>。 

Y 轴 : top | center | bottom | <length> | <percentage>。 

加 ” Z 轴 : <length>。 

对 于 XX 轴 和 YY 轴 来 说 ， 可 以 设置 关键 字 和 百分比 ， 分 别 相对 于 其 本 号 元 素 水 平方 同 的 宽度 和 季 


”直方 向 的 高 度 和 ; Z 轴 只 能 设置 长 度 值 。 
加 站 13.1.15 ”背景 可 见 


元 素 的 背面 在 默认 情况 下 是 可 见 的 , 有 时 可 能 需要 让 元 素 背面 不 可 见 , 这 时 就 可 以 使 用 backface- 


visibility 属性 ， 该 属性 的 具体 语法 格式 如 下 : 


backface-visibility: visible | hidden 


取 值 简单 说 明 如 下 。 
visible: 指定 元 素 背 面 可 见 ， 人 允许 显示 正面 的 镜像 ， 为 默认 值 。 
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回 ”hidden: 指定 元 素 背 面 不 可 见 。 
【示例 】 以 13.1.13 节 示 例 为 基础 ， 如 果 在 变形 图 像样 式 中 添加 “backface-visibility: hidden;”, 定 
义 元 素 背 面 面 向 用 户 时 不 可 见 ， 这 时 再 次 预览 ， 则 会 发 现 变形 图 像 已 经 不 存在 ， 因 为 它 的 背面 面向 用 
户 ， 被 隐藏 了 ， 效 果 如 图 13.17 所 示 。 | 会 
img.change { 国策 


border: solld 1px red: Note 


transform:perspective(180px) rotateX(120deg); 
backface-visibility: hidden: 


口 localhost8080/mysite x ® oN 


cc GC | @ localhost:8080/mysite/test.html 


图 13.17 定义 背面 面 品 用户 不 可 见效 果 
13.2 过 流动 画 


2013 年 2 月 ，W3C 发 布 了 CSS Transitions 工作 草案 ,在 这 个 草案 中 描述 了 CSS 过 渡 动 画 的 基本 
实现 方法 和 属性 。 目 前 获得 所 有 浏览 器 的 支持 ， 包 括 支 持 带 有 前 级 (私有 属性 ) 或 不 带 前 级 (标准 属 
性 ) 的 过 渡 。 最 新 版 本 浏览 器 (IE 10+、Firefox 16+ 和 Opera 12.5+) 均 支 持 不 带 前 级 的 过 渡 属 性 transition， 
而 旧版 浏览 旧 则 支持 各 前 缀 的 过 渡 ， 如 Webkit 引擎 支持 -webkit-transition 私有 属性 ，Mozilla Gecko 引 
擎 支持 -moz-transition 私有 属性 ，Presto 引擎 支持 -o-transition 私有 属性 ， 正 6 一 I9 浏览 器 不 支持 
transition 属性 ，IE10 支持 transition 属性 。 

权威 参考 : http://www.w3.org/TR/css3-transitions/。 


13.2.1 设置 过 渡 属 性 


transition-property 属性 用 来 定义 过 渡 动 画 的 CSS 属性 名 称 ， 基 本 语法 如 下 : 
transition-property: none | all | [<IDENT>][ <IDENT>|*; 

取 值 简单 说 明 如 下 。 

加 ”none: 表示 没有 元 素 。 | 
all: 默认 值 ， 表 示 针 对 所 有 元 素 ， 包 括 :before 和 :after 伪 元 素 。 
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了 1 

[2 

加 ”IDENT: 指定 CSS 属性 列表 。 几 乎 所 有 色彩 、 大 小 或 位 置 等 相关 的 CSS 属性 ， 包 括 许多 新 

添加 的 CSS3 属性 ， 都 可 以 应 用 过 渡 ， 如 CSS3 变换 中 的 放大 、 缩 小 、 旋 转 、 斜 切 、 渐 变 等 。 

【 示例】 在 下 面 示 例 中 ， 指 定 动画 的 属性 为 背景 颜色 。 这 样 当 鼠标 经 过 盒子 时 ， 会 自动 从 红色 背 
景 过 渡 到 监 色 背景 ， 演 示 效 果 如 图 13.18 所 示 。 


<style type="text/css"> 
dv { 
margin: 10px auto: height: 80px; 
backeground: red: 
border-radius: 12px: 
box-shadow: 2px 2px 2pX #999; 
} 
div:hover { 
background-color: blue; 
/# 指 定 动 男 过 渡 的 CSS 属性 */ 
transition-property: backeground-color:; 


} 
</style> 


<div></div> 


口 localhost:8080/r x ® \ DD localhost:8080/m x WN 


人 G | © localhost:8080/my: : GG |© localhost:8080/my: 安 | : 


Oe ， 


默认 状态 鼠标 经 过 时 被 旋转 


图 13.18 定义 简单 的 背景 色 切 换 动画 


2 13.2.2 设置 过 渡 时 间 


transition-duration 属性 用 来 定义 转换 动画 的 时 间 长 度 ， 基 本 语法 如 下 : 
transition-duration:<time> [, <time>|*; 
初始 值 为 0， 适 用 于 所 有 元 素 ， 包 括 :before 和 :after 伪 元 素 。 在 默认 情况 下 ， 动 男 过 渡 时 间 为 0s， 


， 所 以 当 指 定 元 素 动 男 时 ， 会 看 不 到 过 渡 的 过 程 ， 直 接 看 到 结果 。 


【示例 】 以 13.2.1 节 示 例 为 例 ， 下 面 示例 设置 动画 过 渡 时 间 为 2s， 当 鼠标 移 过 对 象 时 ， 会 看 到 


背景 色 从 红色 逐渐 过 渡 到 蓝 色 ， 演 示 效 果 如 图 13.19 所 示 。 
div:hover { 


background-color: blue: 

/# 指 定 动画 过 渡 的 CSS 属性 */ 
transition-property: backeround-color:; 
记 指 定 动画 过 渡 的 时 间 */ 
transition-duration:2s: 


* 392。 


CG |Q@ Ilocalhost8080/mw 人 女 ! 


图 13.19 ”设置 动画 时 间 


13.2.3 设置 延迟 过 渡 时 间 
transition-delay 属性 用 来 定义 开局 过 渡 动 画 的 延迟 时 间 ， 基 本 语法 如 下 : 


transition-delay:<time> [, <time>]*; 


初始 值 为 0， 适 用 于 所 有 元 素 ， 包 括 :before 和 :after 伪 元 素 。 设 置 时 间 可 以 为 正 整 数 、 负 整数 和 
零 ， 非 零 时 必须 设置 单位 是 s( 秒 ) 或 者 ms (毫秒 )， 为 负数 时 ， 过 渡 的 动作 会 从 该 时 间 点 开始 显示 ， 
之 前 的 动作 被 截断 ;为 正 数 时 ， 过 渡 的 动作 会 延迟 触发 。 | 
【示例 】 继 续 以 13.2.2 节 示 例 为 基础 进行 介绍 ， 下 面 示例 设置 过 渡 动 画 推迟 2s 后 执行 ， 则 当 鼠 ， 
标 移 过 对 象 时 ， 会 看 不 到 任何 变化 ，2s 之 后 ， 才 发 现 背 景色 从 红色 逐渐 过 渡 到 赣 色 。 | 
div:hover { 
background-color: blue: 
/# 指 定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color:; 
记 指 定 动画 过 渡 的 时 间 */ | 
transition-duration: 2s: | 
谍 指 定 动画 延迟 触发 */ 
transition-delay: 2s; 
} 


13.2.4 ”设置 过 减 动画 类 型 


transition-timing-function 属性 用 来 定义 过 渡 动 画 的 类 型 ， 基 本 语法 如 下 : 
transition-timing-function:ease | linear | ease-In | ease-out | ease-In-onut | cubic-bezier(<number>, <number>, 
<number>, <number>) [, ease | linear | ease-ln | ease-out | ease-1n-out | cubic-bezier(<number>, <number>,<number>, | 
<number>)]* ' 
属性 初始 值 为 ease， 取 值 简单 说 明 如 下 。 
ease: 平滑 过 渡 ， 等 同 于 cubic-bezier(0.25, 0.1, 0.25, 1.0) 函 数 ， 即 立方 贝 塞 尔 曲 线 效果 。 
linear: 线性 过 渡 ， 等 同 于 cubic-bezier(0.0, 0.0, 1.0, 1.0) 函 数 。 
| 


ease-in: 由 慢 到 快 ， 等 同 于 cubic-bezier(0.42, 0, 1.0, 1.0) 函 数 。 
ease-out: 由 快 到 慢 ， 等 同 于 cubic-bezier(0, 0, 0.58, 1.0) 函 数 。 
ease-in-out: 由 慢 到 快 再 到 慢 ， 等 同 于 cubic-bezier(0.42, 0, 0.58, 1.0) 函 数 。 | 
cubic-bezier: 特殊 的 立方 贝 塞 尔 曲线 效果 。 | 

【示例 】 以 13.2.2 节 示 例 为 基础 进行 介绍 ， 下 面 设置 过 渡 类 型 为 线性 效果 ， 代 码 如 下 : | 
div:hover { 


background-color: blue; 
/# 指 定 动画 过 渡 的 CSS 属性 */ | 


和 办 欠 多 的 
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transition-property: background-color: 
记 指 定 动画 过 渡 的 时 间 */ 
transition-duration: 10s: 

谍 指 定 动画 过 渡 为 线性 效果 */ 
transition-timing-function: linear:; 


} 


”13.2.5 设置 过 渡 触 发 动作 
CSS3 过 渡 动画 一 般 通 过 动态 伪 类 触发 ， 如 表 13.1 所 示 。 也 可 以 通过 JavaScript 事件 触发 ， 包 括 


,click、focus、mousemove、mouseover、mouseout 等 。 


表 13.1 CSS 动态 伪 类 


动 态 伪 类 说 明 
link 未 访问 的 链接 
i 访问 过 的 链接 
i 鼠标 经 过 元 素 
eli 鼠标 单 击 元 素 


:focus 所 有 可 被 选中 的 元 素 元 素 被 选中 


1. :hover 


最 常用 的 过 渡 触 发 方式 是 使 用 :hover 伪 类 。 
【示例 1】 下 面 示例 设计 当 鼠 标 经 过 div 元 素 时 ， 该 元 素 的 背景 颜色 在 经 过 1s 的 初始 延迟 后 ， 于 
2s 内 动态 地 从 绿色 变 为 蓝 色 。 
] <style type="text/css"> 
dv { 
margin: 10px auto: 
height: 80px:; 
border-radius: 12px; 
box-shadow: 2px 2px 2px #999; 
background-color: red: 
transition: background-color 2s ease-1n 1s; 


} 

div:hover {background-color: blue} 
</style> 

<div></div> 


2. :active 

:active 伪 类 表示 用 户 单 击 茶 个 元 素 并 按 住 鼠 标 按键 时 显示 的 状态 。 

| 【示例 2】 下 面 示例 设计 当 用 户 单 击 div 元 素 时 ， 该 元 素 被 激活 ， 这 时 会 触发 动画 ， 高 度 属性 从 
，200px 过 渡 到 400px。 如 果 按 住 该 元 素 ， 保 持 住 活 动 状态 ， 则 div 元 素 始终 显示 400px 高 度 ， 松 开展 
， 标 之 后 ， 又 会 恢复 原来 的 高 度 ， 如 图 13.20 所 示 。 


<style type="text/css"> 
div { 


。 .3D4 。 


margin: 10px auto; 
border-radius: 12px; 
box-shadow: 2px 2px 2px #999; 
background-color: #8AF435; 
height: 200px: 
transition: width 2s ease-ln: 

} 

div:active {height: 400px:} 

</style> 

<div></div> 


由 古 http:if/localho.. 号 


13.20 ”定义 激活 触发 动画 
3. : focus 


:focus 伪 类 通 帝 会 在 表单 对 象 接收 键盘 啊 应 时 出 现 。 
【示例 3】 下面 设计 当 输 入 框 获取 焦点 时 ， 输 入 框 的 背景 色 逐 步 高 亮 显 示 ， 如 图 13.21 所 示 。 


<style type="text/css"> 
label { 
display: block: 
margin: 6px 2pxX; 
} 
input[type="text"], Input[type="password"| { 
padding: 4px; 
border: solid 1px #ddd: 
transition: background-color 1s ease-In:; 
} 
input:focus {backeground-color: #9FFCS4;} 
</style> 
<form 1d=fm-form action="" method=post> 
<fieldset> 
<legend> 用 户 登 录 </legend> 
<label for="name"> 姓 名 
<Input type="text" 1d="name" name="name" > 
</label> 
<label for="pass"> 密 码 
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vote 


<Input type="password" 1d="pass" name="pass" > 
</label> 
</fieldset> 
</form> 


x 


Ga a 中 -| 碟 http://localho. ~ 基尼 大 localhost 


图 13.21 定义 获取 焦点 触发 动画 


窑 提示 : 把 :hover 伪 类 与 :focus 配合 使 用 ， 能 够 丰富 鼠标 用 户 和 键盘 用 户 的 体验 。 


4. :checked 


:checked 伪 类 在 发 生 选 中 状况 时 和 触发 过 渡 ， 取 消 选 中 则 恢复 原来 状态 。 
【示例 4】 下 面 示 例 设 计 当 复 选 框 被 选中 时 绥 慢 缩 进 两 个 字符 ， 演 示 效 果 如 图 13.22 所 示 。 


<style type= "text/css"> 
label.name { 
display: block: 
margin: 6px 2PpX: 
} 
input[type="text"], Input[type= "password"] { 
padding: 4px:; 
border: solid 1px #ddd: 
input[type="checkbox"| {transition: margin ls ease:} 
input[type="checkbox"|:checked {margin-left: 2em:} 


</style> 
<form 1d=fm-form action="" method=post> 
<fieldset> 
<legend> 用 户 登 录 </legend> 


<label class="name" for="name"> 姓 名 
<Input type="text" 1d="name" name="name" > 
</label> 
<p> 技 术 专 长 <br> 
<label> 
<Input type="checkbox" name="web" value="html" 1d="web 0"> 
HTML</label><br> 
<label> 
<Inpnut type="checkbox" name="web" value="css" 1d="web 1"> 
CSS</label><br> 
<label> 
<input type="checkbox" name="web" value="Javascript" 1d="web 2"> 
JavaScript</label><br> 
</p> 
</fieldset> 
</form> 
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图 13.22 定义 被 选中 时 触发 动画 

触发 元 素 状态 变化 的 另 一 种 方法 是 使 用 CSS3 媒体 查询 ， 媒 体 查 询 的 相关 知识 在 第 14 章 详 细 | 

介绍 。 | 

【示例 5】 下 面 示 例 设计 div 元 素 的 宽度 和 高 度 为 49%，200px， 如 果 用 户 将 窗口 大 小 调整 到 420px 

或 以 下 ， 则 该 元 素 将 过 渡 为 100%，100px。 也 就 是 说 ， 当 窗口 宽度 变化 经 过 420px 的 阔 值 时 ， 将 会 触 
发 过 渡 动 画 ， 如 图 13.23 所 示 。 


<style type="text/css"> | 
div { 
float: left; margin: 2px; 
width: 49%: height: 200px: 
background: #93FB40; 
border-radius: 12px:; 
box-shadow: 2px 2px 2px #999; 
transition: width 1s ease, height 1s ease; 
} 
@media only screen and (max-width: 420px) { | 
div { | 
width: 100%%: | 
height: 100px: | 


x x 
外: 征 hspyilocalho. * 旦 0 | 多 localhox 二 由 - 古 htpy/localho. - 昌 C | localhost 


窗口 宽度 小 于 等 于 420px 窗口 宽度 大 于 420px | 
图 13.23 媒体 查询 触发 动画 


如 果 网 页 加 载 时 用 户 的 窗口 大 小 是 420px 或 以 下 , 浏览 器 会 在 该 部 分 应 用 这 些 样式 , 但 是 由 于 不 
会 出 现状 态 变化 ， 因 此 不 会 发 生 过 渡 。 | 
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6. JavaScript 事件 
【示例 6】 下 面 示例 可 以 使 用 纯粹 的 CSS 伪 类 触发 过 渡 , 为 了 方便 用 户 理 解 , 这 里 通过 jQuery 脚 


， 本 触发 过 渡 。 


<script type="text/Javascript" src="1mages/Jquery-1.10.2.]s"></script> 
<script type="text/Javascript"> 
$(function(O) { 
$("#button").click(function() { 
$(".box").toggleClass("change"): 
二 
六 
</script> 
<style type="text/css"> 
.box { 
margin:4px; 
background: #93FB40:; 
border-radius: 12px; 
box-shadow: 2px 2px 2px #999; 
width: $0%: height: 100px: 
transition: width 2s ease, height 2s ease: 
} 
.change { width: 100%:; height: 120px;} 
</style> 
<input type="button" 1d="button" value=" 触 发 过 渡 动 画 " /> 
<div class="box"></div> 
在 文档 中 包含 一 个 box 类 的 盒子 和 一 个 按钮 ， 当 单 击 按钮 时 ,jQuery 脚本 都 会 将 盒子 的 类 切换 为 
change， 从 而 触发 过 渡 动 画 ， 演 示 效 果 如 图 13.24 所 示 。 


x 7 
| htp/flocalho.. " 0 |. htp://ocalho.. - 6 
| 放 发 过 沪 动 盏 


默认 状态 JavaScript 事件 激活 状态 
图 13.24 使 用 JavaScript 脚本 触发 动画 


上 面 演示 了 样式 发 生变 化 会 导致 过 渡 动 画 ， 也 可 以 通过 其 他 方法 触发 这 些 更 改 ， 包 括 通 过 
JavaScript 脚本 动态 更 改 。 从 执行 效率 来 看 ， 事 件 通 常 应 当 通 过 JavaScript 触发 ， 简单 动画 或 过 渡 则 应 


| 使 用 CSS 触发 。 


13.3 帧 动 画 


2012 年 4 月 ，W3C 发 布 『 CSS Animations 工作 草案 , 在 这 个 草案 中 描述 了 CSS 关键 帧 动画 的 基 
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本 实现 方法 和 属性 。 目 前 最 新 版 本 的 主流 浏览 器 都 支持 CSS 帧 动画 ， 如 IE 10+、Firefox 和 Opera 均 
支持 不 带 前 级 的 动画 属性 animation， 而 旧版 浏览 器 则 支持 带 前 级 的 动 男 属性 ， 如 Webkit 引擎 支 持 
-Webkit-animation 私有 属性 ，Mozilla Gecko 引擎 支持 -moz-animation 私有 属性 ，Presto 引擎 支持 


-0-animation 私有 属性 ，IE6 一 IE9 浏览 器 不 文 持 animation 属性 。 
权威 参考 : http://www.w3.org/TR/css3-animations/。 


13.3.1 设置 关键 帧 


CSS3 使 用 @keyframes 定义 关键 帆 。 具 体 用 法 如 下 : 


(Qkeyframes animationname { 
keyframes-selector { 
css-styles; 

} 
} 


参数 说 明 如 下 。 
animationname: 定义 动 男 的 名 称 。 | 
加 ”keyframes-selector: 定义 帧 的 时 间 位 置 , 也 就 是 动 男 时 长 的 百分比 , 合法 的 值 包括 0 一 100%、 
from〔 等 价 于 0%) 、to〔 等 价 于 100%) 。 
四 ”css-styles: 表示 一 个 或 多 个 合法 的 CSS 样式 属性 。 ] 
在 动画 进行 过 程 中 , 用户 能 够 多 次 改变 这 套 CSS 样式 。 以 百分比 或 者 通过 关键 词 fom 和 to 来 定 ， 
义 样 式 改 变 发 生 的 时 间 。 为 了 获得 最 佳 浏览 器 支持， 设计 关键 帧 动画 时 ， 应 该 始终 定义 0% 和 100% | 
位 置 帧 。 最 后 ， 为 每 帧 定义 动态 样式 ， 同 时 将 动画 与 选择 器 绑 定 。 
【示例 】 下 面 示例 演示 如 何 让 一 个 小 方 盒 沿 着 方形 框 内 壁 匀 速 运动 ， 效 果 如 图 13.25 所 示 。 
<style> 
#wrap {人 * 定 义 运动 轨迹 包含 框 */ 
position:relative; 诺 定 义 定位 包含 框 ， 避 人 免 小 盒子 跑 到 外 面 运动 */ 
border:solid 1px red:; 
width:250px; height:250px:; 


} 
#box {/* 定 义 运动 小 盒 的 样式 */ 
position:absolute: 
left:0; top:0: 
width: SOpx: height: SOpx: 
backsround: #93FB40: 
border-radius: 8px; 
box-shadow: 2px 2px 2px #999; 
/# 定 义 帧 动画 : 名 称 为 ball， 动 画 时 长 5s， 动 画 类 型 为 匀速 渐变 ， 动 画 无 限 播放 */ 
animation: ball $s linear infinite: 


} 
此 定义 关键 帧 ， 共 包括 5 帧 ， 分 别 在 总 时 长 99%、25%、50%、75%、100% 的 位 置 */ 
上 # 每 帧 中 设置 动画 属性 为 left 和 top， 让 它们 的 值 匀速 渐变 ， 产 生 运动 动画 */ 
(@keyframes ball { 

0% {left:0:;top:0;} 

25% {left:200px;:top:0;} 

$50% {left:200px;top:200px;} 
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75% {left:0:top:200px;:} 
100% {left:0;top:0;} 
} 
</style> 
<div 1d="wrap"> 
<div 1d="box"></div> 
</div> 


x 


(+) ES http://localho... ~ 虽 上 碟 localhost xX 


13.25 ”设计 小 盒子 运动 动画 

13.3.2 ”设置 动画 属性 

Animations 功能 与 Transition 功能 相同 ， 都 是 通过 改变 元 素 的 属性 值 来 实现 动画 效果 的 。 它 们 的 
区 别 在 于 : 使 用 Transitions 功能 时 只 能 通过 指定 属性 的 开始 值 与 结束 值 ,然后 在 这 两 个 属性 值 之 间 进 
行 平滑 过 渡 的 方式 来 实现 动画 效果 ， 因 此 不 能 实现 比较 复杂 的 动画 效果 ; 而 Animations 则 通过 定义 
多 个 关键 帧 以 及 定义 每 个 关键 帧 中 元 素 的 属性 值 来 实现 更 为 复杂 的 动画 效果 。 

1. 定义 动画 名 称 

使 用 animation-name 属性 可 以 定义 CSS 动画 的 名 称 ， 语 法 如 下 : 

animation-name:none | IDENT |, none |IDENT]#: 

初始 值 为 none， 定 义 一 个 适用 的 动画 列表 。 每 个 名 字 用 来 选择 动画 关键 帧 ， 提 供 动画 的 属性 值 。 
如 果 名 称 是 none， 那 么 就 不 会 有 动画 。 

2. 定义 动画 时 间 

使 用 animation-duration 属性 可 以 定义 CSS 动画 播放 时 间 ， 语 法 如 下 : 

animation-duration:<time> [, <time>|*; 

在 默认 情况 下 该 属性 值 为 0， 这 音 味 着 动画 周期 是 直接 的 ， 即 不 会 有 动 夯 。 当 值 为 负 值 时 ， 则 被 
视 为 0。 

3. 定义 动画 类 型 

使 用 animation-timing-function 属性 可 以 定义 CSS 动画 类 型 ， 语 法 如 下 : 


animation-timing-function:ease | linear | ease-In | ease-out | ease-In-onut | cubicbezier(<number>, <number>, 
number>, <number>) [, ease | linear lease-In | ease-out | ease-in-out | cubic-bezier(<number>, <number>,<number>, 
<number>)]* 


。360。 


第 ] 3 章 设计 CSS3 动画 


初始 值 为 ease， 取 值 说 明 可 参考 13.2.4 节 介 绍 的 过 渡 动 画 类 型 。 

4. 定义 延迟 时 间 

使 用 animation-delay 属性 可 以 定义 CSS 动画 延迟 播放 的 时 间 ， 语 法 如 下 : 

animation-delay: <time> [, <time>]*: | 到 

该 属性 允许 一 个 动画 开始 执行 一 段 时 间 后 才 被 应 用 。 当 动画 延迟 时 间 为 0, 即 默认 动画 延迟 时 间 ， 
则 意味 着 动画 将 尽快 执行 ， 人 否则 该 值 指定 将 延迟 执行 的 时 间 。 

5. 定义 播放 次 数 

使 用 animation-iteration-count 属性 定义 CSS 动画 的 播放 次 数 ， 语 法 如 下 : 

animation-iteration-count: infinite | <number> [, infinite | <number>]*: 

默认 值 为 1， 这 意味 着 动画 将 从 开始 到 结束 播放 一 次 。infinite 表示 无 限 次 ， 即 CSS 动画 永远 重 ， 


复 。 如 果 取 值 为 非 整 数 ， 将 导致 动画 结束 一 个 周期 的 一 部 分 。 如 果 取 值 为 负 值 ， 则 将 导致 在 交 蔡 周期 
内 反问 播放 动画 。 


6. 定义 播放 方 同 
使 用 animation-direction 属性 定义 CSS 动画 的 播放 方向 ， 基 本 语法 如 下 : 
animation-direction: normal | alternate |[, normal | alternate|*: 


默认 值 为 normal。 当 为 默认 值 时 ， 动 画 的 每 次 循环 都 回 前 播放 。 男 一 个 值 是 altermate， 设 置 该 值 
则 表示 第 偶数 次 同 前 播放 ， 第 奇数 次 癌 反 方 奖 播放。 


7. 定义 播放 状态 
使 用 animation-play-state 属性 定义 动画 正在 运行 还 是 暂停 ， 语 法 如 下 : 
es 
初始 值 为 running。 其 中 paused 定义 动画 已 暂停 ，running 定义 动画 正在 播放 。 
会 提示 : 可 以 在 JavaScript 中 使 用 animation-play-state 属性 ， 这 样 就 能 在 播放 过 程 中 暂停 动画 。 在 ， 
JavaScript 脚本 中 用 法 如 下 : 
a 


8. 定义 播放 外 状态 
使 用 animation-fill-mode 属性 定义 动画 外 状态 ， 语 法 如 下 : 
animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both]* | 


初始 值 为 none， 如 果 提 供 多 个 属性 值 ， 以 去 号 进行 分 隔 。 取 值 说 明 如 下 。 

none: 不 设置 对 象 动画 之 外 的 状态 。 

forwards: 设置 对 象 状态 为 动画 结束 时 的 状态 。 

backwards: 设置 对 象 状态 为 动画 开始 时 的 状态 。 

both: 设置 对 象 状态 为 动画 结束 或 开始 的 状态 。 

【示例 】 下 面 示例 设计 一 个 小 球 ， 并 定义 它 水 平 同 左 运动 ， 动 画 结束 之 后 ， 再 返回 起 始点 位 置 ， 
效果 如 图 13.26 所 示 。 
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<style> 
谍 启 动 运 动 的 小 球 ， 并 定义 动画 结束 后 返回 */ 
.ball{ 
width: SOpx: height: SOpx: 
background: #93FB40; 
border-radius: 100%: 
box-shadow:2px 2px 2px #999:; 
animation:ball 1s ease backwards: 


} 
谍 定 义 小 球 水 平 运 动 关键 帧 */ 
(keyframes ball{ 
0% {transform:translate(0.,0):} 
100% {transform:translate(400px);} 
} 
</style> 
<div class="ball"></div> 


图 13.26 设计 运动 小 球 最 后 返回 起 始点 位 置 
13.4 案例 实战 


本 节 将 通过 多 个 案例 帮助 读者 上 机 练习 和 提升 CSS3 动画 设计 技法 。 


“13.4.1 设计 图 形 


【示例 1】 设计 净 形 。 制 作 萎 形 的 方法 有 很 多 种 ， 本 例 结合 使 用 transform 属性 和 rotate0 函 数 ， 


”使 两 个 正 反 三 角形 上 下 显示 ， 效 果 如 图 13.27 所 示 。 


#shape { 
width: 120px: height: 120px:; 
backeground: #1eff00; 
margin: 60px auto: 
transform: rotate(-45deg); 。。/* 逆 时 针 旋 转 45”*/ 
transform-origin: 0 100%; ”/* 以 右上 角 为 原点 进行 旋转 */ 
} 
</style> 
<div 1d="shape"></div> 


【示例 2】 设 计 平 行 四 边 形 。 使 用 transform 属性 让 长 方形 倾斜 一 个 角度 即 可 制作 平行 四 边 形 ， 


”效果 如 图 13.28 所 示 。 
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<style type="text/css"> 

#shape { 
width: 200px: height: 120px: 
background: #1eff00; 
margin: 60px auto: 
transform: skew(30deg); 

} 

</style> Note 

<div 1d="shape"></div> 


x x 


Ea > Oh 总 http:Wlocalho… ~ 昌 避 〗 感 locaslhos 后 ed 由 - 钳 http:Wlocalho… ~ 全 Glocslhost 


图 13.27 设计 蓉 形 图 13.28 设计 平行 四 边 形 


【示例 3】 设 计 星 形 。 星 形 的 HTML 结构 也 是 一 个 <div id="star"> 标 签 ， 星 形 的 实现 方法 比较 复 
杂 ， 主 要 是 使 用 transform 属性 来 旋转 不 同 的 边 ， 借 助 :before 和 :after 伪 对 象 完 成 ， 样 式 代 码 如 下 ， 效 
果 如 图 13.29 所 示 。 
<style type="text/css"> 
#star { 放 设 计 三 角形 ， 然 后 旋转 ， 定 义 左 顶 角 和 右 下 顶 角 */ 
width: 0:; height: 0: 
margin: 80px auto: 
color: #fc2e5a: 


position: relative; 上 话 定 义 定位 包含 框 ， 后 面 生 成 内 容 根 据 该 框 定位 */ 
display: block: 诺 块 显示 ， 避 人 免 行内 显示 出 现 异常 */ 


/# 设 计 三 角形 机 

border-right: 100px solid transparent: 
border-bottom: 70px solld #fc2eSa:; 
border-left: 100px solid transparent; 
/# 旋 转 三 角形 机 

transform: rotate(3Sdeg): 


} 
#star:before { /* 生 成 三 角形 ， 定 义 回 上 顶 角 */ 
content: ": 访 不 包含 内 容 */ 
height: 0; width: 0; 
position: absolute: 谍 绝 对 定位 */ 
display: block: 诺 块 显示 ， 避 人 免 行内 显示 出 现 异常 */ 
top: -45px: left: -6Spx: 谍 固 定 到 顶部 位 置 显示 */ 


话 设 计 三 角形 */ 

border-bottom: 80px solid #fc2eSa:; 
border-left: 30px solid transparent; 
border-right: 30px solid transparent; 
上 旋转 三 角形 */ 

transform: rotate(-35deg); 


广 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 -一 一 一 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
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} 
#star:after { /* 设 计 三 角形 ， 然 后 旋转 ， 定 义 右 项 角 和 左下 顶 角 */ 


content: ": 
width: 0; height: 0; 
Ep position: absolute: 
Ee display: block: 
top: 3px: left: -10Spx: 
Note 0 


border-right: 100px solid transparent: 
border-bottom: 70px solid #fc2eSa:; 
border-left: 100px solid transparent: 
transform: rotate(-70deg); 


} 
</style> 


<div 1d="star"></div> 


【示例 4】 下 面 示例 设计 一 个 心 形 。 心 形 的 制作 比较 复杂 ， 可 以 使 用 伪 对 象 ， 分 别 将 伪 对 象 旋转 
不 同 的 角度 , 并 修改 transform-origin 属性 来 设计 对 象 的 旋转 中 心 点 。 示例 样 式 代码 如 下 , 效果 如 图 13.30 
所 示 。 

<style type="text/css"> 

#heart {position: relative; margin:SO0px auto; width:120px;} 

#heart:before, #heart:after { 
content: "": 
width: 70px: height: 11Spx: 
position: absolute:; 
backeground: red: 
left: 70px: top: 0; 
border-radius: SOpx S50px 0 0; 
transform: rotate(-45deg); 
transform-origin: 0 100%; 

} 

#heart:after { 
left: 0; 
transform: rotate(4Sdeg); 
transform-origin: 100% 100%; 


} 
</style> 


<div 1d="heart"></div> 


= 时 站 古 localhost ee 


| Ht- @ ht/ocalho.. » So 


图 13.29 ”设计 星 形 图 13.30 ”设计 心 形 
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会 提示 : 配合 使 用 变形 函数 和 伪 对 象 选 择 器 ， 还 可 以 设计 出 更 多 复杂 图 形 。 


13.4.2 ”设计 冒 泡 背 景 按钮 


本 例 应 用 CSS3 过 渡 动 画 特 效 ， 为 按钮 背景 图 像 定 义 动态 移动 效果 ， 设 计 当 鼠标 经 过 时 ， 按 钮 背 ， 
景 绚丽 多 彩 ， 不 断 产生 冒 泡 动画 效果 ， 如 图 13.31 所 示 。 


图 13.31 设计 背景 冒 泡 效果 的 按钮 样式 | 


【操作 步骤 】 | 
第 1 步 ， 设 计 按钮 基本 样式 。 
.button{ | 
font:1Spx Calibri, Arial, sans-serif: 

记 半 透明 的 文本 阴影 */ | 
text-shadow:1px lpx 0 reba(255,255,255,0.4); 

上 * 重 写 默认 下 夯 线 的 链接 样式 */ | 
text-decoration:none !1mportant; | 
white-space:nowrap; 诺 禁 止 文本 换行 显示 */ | 
display:inline-block: /# 行 内 块 显示 拆 
vertical-align:baseline; /* 垂 直 基线 对 齐 关 
position:relative; 谍 相 对 定位 */ | 
cursorpointer 放 鼠 标 指针 为 手 形 */ | 
padding: 10px 20px: 诬 增 加 按钮 内 空间 */ | 
background-repeat:no-repeat; | 


谍 下 和 面 两 个 规则 是 回 退 ， 以 防 浏览 器 不 支持 多 重 背 景 */ 
backeground-position:bottom left: 
background-1mage:url(i1mages/button bg.png'"); 
此 多 重 背 景 。 背 景 图 像 在 颜色 类 中 单独 定义 */ 
background-position:bottom left, top right, 0 0, 0 0; 
backeground-clip:border-box:; 
谍 设 计 圆 角 */ 
border-radius:8px; 
/# 添 加 1px 的 高 完 效果 */ | 
box-shadow:0 0 1px #fff nset; 
谍 设 计 CSS 过 渡 动 画 ， 动 画 属性 为 背景 图 像 的 位 置 */ 
transition:background-position 1s; 

} 

第 2 步 ， 设 计 鼠 标 经 过 时 的 动态 样式 。 

-button:hover { 


background-position: top left; /* 回 退 技 术 ， 兼 容 浏览 器 不 文 持 多 背景 */ 
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background-position: top left, bottom right, 0 0, 0 0; 
} 
第 3 步 ， 设 计 激 活 时 ， 按 钮 下 沉 样 式 。 
.button:active {bottom: -1px;} 
第 4 步 ， 设 计 按 钮 大 小 号 类 样式 。 


.button.button big {font-size: 30px:} 
.button.button medium {font-size: 18px:} 
.button.button small {font-size: 13px:} 


第 5 步 ， 设 计 圆 角 按钮 类 样式 。 
.button.button rounded {border-radius: 4em:;} 


第 6 步 ， 设 计 按 钮 主题 类 样式 。 


.button blue.button { 
color: #0f4b6d !Iimportant: 
border: 1px solid #84acc3 !Important: 
此 回 退 背景 色 颜 色 */ 
background-color: #48b5f2; 
让 定义 多 背景 图 */ 
background-1mage: url(images/button bg.png'), url(images/button bg.png'), radial-gradient(center bottom, 


,circle, rgba(89,208,244.,1) 0, rgba(89,208,244.0) 100px), linear-gradient(#4fbbf7, #3faeeb);: 


} 
.button_blue.button:hover { /* 定 义 鼠 标 经 过 时 多 背景 图 样式 */ 
background-color: #63c7fe: 
background-1mage: url(i1mages/button bg.png’), url(images/button bg.pneg'), radial-gradient(center bottom, 


circle, rgba(109,217,250,1) 0, reba(109,217,250,0) 100px), linear-gradient(#63c7fe, 的 8bef7): 


} 


13.4.3 ”设计 动画 效果 菜单 


本 例 利用 CSS3 过 渡 动 男 设计 一 个 界面 切换 的 导航 菜单 ， 当 鼠标 经 过 沫 单项 时 ， 会 以 动画 形式 从 
中 文 界 面 缓慢 翻转 到 英文 界面 ， 或 者 从 英文 界面 翻转 到 中 文 界面 ， 效 果 如 图 13.32 所 示 。 


Xx 


和 = 2 由 "| 感 hitp://localhost:8080/mysite/indext ~ 奶 @ 剧 localhost x 但 友 这 


图 13.32 设计 动画 翻转 菜单 样式 


【操作 步骤 】 
第 1 步 , 设计 菜单 结构 。 在 每 个 菜单 项 (<div class="menul"> ) 中 包含 两 个 子 标签 : <div class= "one"> 
| 和 <div class="two">， 设 计 菜 单项 仅 显 示 一 个 子 标签 ， 当 鼠标 经 过 时 ， 翻 转 显 示 男 一 个 子 标签 。 


<div> 


<div class="menul'"> 
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<div class="one"><a hre 伍 "#"> 首 页 </a></div> 
<div class="two"><a href—"#">Home</a></div> 
</div> 
<div class="menul"> 
<div class="one"><a hre 人 ="#"> 新 闻 </a></div> 
<div class="two"><a href—="#">News</a></div> 
</div> 
<div class="menul"> 
<div class="one"><a hre 人 f="#"> 关 于 </a></div> 
<div class="two"><a href="#">About</a></div> 
</div> 
</div> 


第 2 步 ， 设 计 琳 蛙 项 的 样式 。 固 定 大 小 ， 相 对 定位 ， 茶 止 内 容 洲 出 容器 ， 癌 左 浮动 ， 定 义 并 列 


显示 。 


.menul { 
width: 100px: height: 30px: 
position: relative; 
font-family: 微软 雅 黑 ; font-size: 12px; color: #fff: 
overflow: hidden: 
float: left: 
} 


第 3 步 ， 设 计 每 个 菜单 项 中 子 标签 <div class="one"> 和 <div class="two"> 的 样式 。 定 义 它 们 与 菜 ， 
单项 相同 大 小 ， 这 样 就 只 能 够 显示 一 个 子 标签 ; 为 了 方便 控制 ， 定 义 它们 为 绝对 定位 ， 包 含 文本 水 平 ， 


居中 和 垂直 居中 ;， 最 后 定义 过 渡 动 画 时 间 为 0.3s， 加 速 到 减速 显示 。 


.menul div { 
width: 100px; height: 30px; 
line-height: 30px; text-align: center:; 
position: absolute: 
transition: all 0.3s ease-1n-out: 

} 


第 4 步 ， 设 计 过 渡 动 画 样 式 。 本 例 设计 过 渡 演 示 属 性 为 left、top 和 bottom， 当 鼠标 经 过 时 ， 改 
变 定位 属性 的 值 ， 实 现 灯 单项 动态 翻转 效果 。 


.menul .one { 
top: 0; left: 0: 
Z-Index: ] : 
background: #63C: color: #EFF: 
} 
.menul :hover .one {top: -30px; left: 0;} 
.menul .two { 
bottom: -30px: left: 0: 
Z-Index: 2: 
background: #f50; color: #FFF:; 
} 
.mnenul:hover .two {bottom: Opx: left: 0:} 
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a 13.4.4 ”设计 照片 特效 


本 例 使 用 CSS3 阴影 、 透 明 效果 ， 以 及 变换 ， 设 计 图 片 随意 贴 在 墙 上 效果 ， 当 鼠标 移动 到 图 片上 
”时 ， 图 片 会 自动 放大 并 垂直 排列 ， 演 示 效 果 如 图 13.33 所 示 。 


Xx 
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图 13.33 ”设计 挂图 效果 


案例 主要 代码 如 下 : 


<style type="text/css"> 
ul.polaroids li {display: inline;} 
ul.polaroids a { 
display: nline; float: left; 
margin: 0 0 50px 60px; padding: 12px: 
text-align: center; 
text-decoration: none: color: #333; 
放 为 图 片 外 框 设计 阴影 效果 */ 
box-shadow: 0 3px 6px rgba(0, 0, 0, .25); 
/# 设 置 过 渡 动 画 : 过 渡 属 性 为 transform， 时 长 为 0.15s， 线 性 渐变 */ 
transition: -webkit-transform .1Ss linear:; 
/# 顺 时 针 旋 转 2”*/ 
transform: rotate(-2deg): 


} 

ul.polaroids img { /* 统 一 图 片 基本 样式 */ 
display: block: 
height: 100px:; 


border: none: 
margin-bottom: 12px:; 


} 
从 利用 图 片 的 tittle 属性 ， 添 加 图 片 显 示 标 题 */ 
ul.polaroids a:after {content: attr(title):;} 
谍 侦 数 图 片 倾斜 显示 */ 
ul.polaroids li:nth-child(even) a { 

transform: rotate(10deg): /#* 逆 时 针 旋 转 10”*/ 
} 
ul.polaroids l1 a:hover { 

/# 放 大 对 象 1.25 售 */ 

transform: scale(1.25); 

box-shadow: 0 3px 6px rgba(0, 0, 0, .5); 
} 
</style> 
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<ul class="polaroids"> 
<]i> <a hre 伍 "1" title=" 相 识 "> <img src="images/1.jpg" alt=" 相 识 "> </a> < 由 > 
<]i> <a hre 伍 "2" title=" 相 知 "> <img src="images/2.jpg" alt=" 相 知 "> </a> < 由 > 
<]i> <a hre 信 "3" title=" 自 信心 <img src="images/3.jpg" alf=" 自 信 "> </a> < 由 > 
</ul> 


13.4.5 ”设计 立体 盒子 


【示例 1】 下 面 示例 使 用 2D 多 重 变换 制作 一 个 正方 体 ， 演 示 效 果 如 图 13.34 所 示 。 


<style type="text/css"> 
body {padding:20px 0 0 100px:} 
.Side { 
height: 100px; width: 100px:; 
position: absolute; 
font-size: 20px; font-weight: bold: line-height: 100px: text-align: center; color: #f{f: 
text-shadow: 0 -1px 0 rgba(0.,0,0,0.2); 
text-transform: uppercase; 


} 
.top {/* 顶 面 */ 
background: red: 
transform: rotate(-45deg) skew(1Sdeg, 1Sdeg): 


} 
.le 人 {/* 左 侧面 */ 
background: blue: 
transform: rotate(1Sdeg) skew(1Sdeg, 15deg) translate(-50%, 100%); 


} 
Tight {/* 右 侧面 */ 
background: green:; 
transform: rotate(-1$deg) skew(-1Sdeg, -1Sdeg) translate($50%, 100%); 
} 
</style> 
<div class="side top"> 顶 面 </div> 
<div class="side left"> 左 侧面 </div> 
<div class="side right"> 右 侧面 </div> 


【示例 2】 下面 示例 使 用 3D 多 重 变 换 制作 一 个 正方 体 ， 演 示 效 果 如 图 13.35 所 示 。 


<style type="text/css"> 

.stage {/* 定 义 画 布 样式 */ 
width: 300px: height: 300px: margin: 100px auto; position: relative: 
perspective: 300px:; 


} 
此 定义 盒子 包含 框 样式 */ 
.container {transform-style: preserve-3d;} 
访 定 义 盒子 六 面 基 本 样式 */ 
.slide { 
background: reba(255,0,0,0.3); 
border: 1px solid red: 
font-size: 60px; font-weight: bold: color: #fff: text-align: center:; 
height: 196px: line-height: 196px:; width: 196px: 
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position: absolute:; 
text-shadow: 0 -1px 0 rgba(0.,0,0,0.2); 
text-transform: Uppercase: 


} 
Ey | .front {/* 使 用 3D 变换 制作 前 面 */ 
transform: translateZ(100px); 


3 
EY .back {/* 使 用 3D 变换 制作 后 面 */ 


transform: rotateX(180deg) translateZ( 100px); 


3 
.left {/* 使 用 3D 变换 制作 左面 */ 
transform: rotateY(-90deg) translateZ(100px); 


} 
Tight {/* 使 用 3D 变换 制作 右面 */ 
transform: rotateY (90deg) translateZ(100px); 


} 
.top {/* 使 用 3D 变换 制作 顶 面 */ 
transform: rotateX(90deg) translateZ( 100px); 


} 
.bottom {/* 使 用 3D 变换 制作 底面 */ 
transform: rotateX(-90deg) translateZ(100px); 
} 
</style> 
<div class="stage"> 
<div class="container"> 
<div class="side front"> 前 而 </div> 
<div class="side back"> 背 面 </div> 
<div class="side left"> 左 面 </div> 
<div class="side right"> 右 面 </div> 
<div class="side top"> 顶 面 </div> 
<div class="side bottom"> 底 面 </div> 
</div> 
</div> 


Ee. heecatons ace > 状 攻 下 


x 
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图 13.34 设计 2D 变换 盒子 图 13.35 设计 3D 盒子 
13.4.6 ”设计 旗 转 盒子 
以 13.4.5 节 示 例 为 基础 ， 使 用 animation 属性 设计 盒子 旋转 显示 。 
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【示例 1】 本 例 使 用 2D 制作 一 个 正方 体 ， 然后 设计 它 在 鼠标 经 过 时 沿 YY 轴 旋 转 , 演示 效果 如 
图 13.36 所 示 。 


【操作 步骤 】 
第 1 步 ， 复 制 13.4.5 节 示 例 indexl.html。 在 HIML 结构 中 为 盒子 添加 两 层 包 含 框 。 
<div class="stage s1"> 
<div class="container"> 


<div class="side top">Top</div> 
<div class="side left">Left</div> 
<div class="side right">Right</div> 
</div> 
</div> 
第 2 步 ， 在 内 部 样式 表 中 定义 关键 帧 。 
席 定 义 关 键 帧 动画 */ 
(@keyframes spin{/* 标 准 模式 */ 
0% {transform:rotateY (0deg)} 
100% {transform:rotateY(360deg)} 
} 


第 3 步 ， 设 计 3D 变换 的 透视 距离 和 变换 类 型 ， 即 启动 3D 变换 。 


席 定 义 盒子 所 在 画布 框 的 样式 */ 

.Stage {perspective: 1200px;} 

此 定 义 盒子 包含 框 样式 */ 

.container {transform-style: preserve-3d;} 

第 4 步 ， 定 义 动画 触发 方式 。 

记 定 义 鼠标 经 过 盒子 时 触发 线性 变形 动画 ， 动 画 时 间 为 5s， 持 续 播 放 */ 
.container:hover{animation:spin $s linear mfinite;} 


本 例 完 整 代 码 请 参考 本 书 源 代码 。 


【示例 2】 本 例 使 用 3D 制作 一 个 正方 体 ， 然 后 设计 它 在 鼠标 经 过 时 沿 YY 轴 旋 转 ， 演 示 效 果 如 
图 13.37 所 示 。 


DB localhost:BOBO0/mysite’ Xx 


x 
© > 外 - 古 http:i/localho.. ~ 鱼 0 筷 localhost 
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图 13.36 设计 旋转 的 3D 盒子 (1) 图 13.37 设计 旋转 的 3D 盒子 (2) 


【操作 步骤 】 
第 1 步 ， 在 内 部 样式 表 中 定义 关键 帧 。 
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ce gy 


席 定 义 关键 帧 动画 */ 
(@keyframes spin { 
0% {transform:rotateY (0deg)} 
100% {transform:rotateY(360deg)} 
} 


第 2 步 ， 设 计 3D 变换 的 透视 距离 和 变换 类 型 ， 即 启动 3D 变换 。 
旋 定 义 画 布 样式 */ 

.Stage {perspective: 300px:} 

人 # 定 义 盒子 包含 框 样式 #/ 

.container {transform-style: preserve-3d;} 


第 3 步 ， 定 义 动画 触发 方式 。 


上 # 定 义 鼠 标 经 过 时 触发 盒子 旋转 动画 状 
.container:hover {animation: spin $s linear Infinlte:} 


本 例 完整 代码 请 参考 本 书 源 代 码 。 
13.4.7 设计 翻转 广告 


本 例 设 计 当 鼠 标 移 动 到 产品 图 片上 时 ， 产 品 信息 翻转 滑 出 ， 效 果 如 图 13.38 所 示 。 在 默认 状态 下 
只 显示 产品 图 片 ， 而 产品 信息 不 可 见 。 当 鼠标 移动 到 产品 图 像 上 时 ， 产 品 图 像 慢 慢 往 上 旋转 ， 使 产品 
诗 恩 展示 出 来 ， 而 产品 图 像 慢 慢 隐藏 ， 看 起 来 就 像 是 一 个 旋转 的 盒子 。 


[9 localhost/mysite/test ht x 5 localhost/mysite/test ht x 


3 @ Dlocalhost/mysite/testhtml sol VY 


3 @ | localhost/mysite/test.html Y 晤 内 三 


Cn PE 


及 高 下 际 吕 OO 元 


oY 


默认 状态 翻转 状态 
图 13.38 设计 3D 翻转 广告 
案例 主要 代码 如 下 : 
<style type="text/css"> 
访 定 义 包含 框 样式 */ 
-wrapper { 


display: Inline-block: width: 34Spx: height: 186px: margin: lem auto; cursor: pointer; position: relative:; 
/# 定 义 3D 元 素 距 视 图 的 距离 */ 
perspective: 4000px:; 


} 
/# 定 义 旋 转 元 素 样式 : 3D 动画 ， 动 画 时 间 为 0.6s*/ 
.ltem { 

height: 186px: 

transform-style: preserve-3d; 
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transition: transform .6s; 


} 
* 定 义 鼠 标 经 过 时 触发 动画 ， 并 定义 旋转 形式 类 
.ltem:hover { 
transform: translateZ(-50px) TotateX(9Sdeg): 
} 
.ltem:hover 1mg {box-shadow: none: border-radius: 1 Spx:} 
.ltem:hover .information {box-shadow: Opx 3px 8px rgba(0,0,0,0.3):; border-radius: 1Spx:;} 
访 定 义 广 告 图 的 动画 形式 和 样式 */ 
.ltem>lmg { 
display: block: position: absolute: top: 0; border-radius: 3px;box-shadow: Opx 3px 8px rgba(0,0,0,0.3); 
transform: translateZ(S0pxX): 
transition: all .6s: 


} 

谨 定 义 广 告 文 字 的 动画 形式 和 样式 */ 

.ltem .Information { 
position: absolute; top: 0; height: 186px:; width: 34Spx: border-radius: 1Spx; 
transform: rotateX(-90deg) translateZ(S0pX): 
transition: all .6s: 

} 

</style> 


<div class="wrapper"> 
<div class="1item"> 
<1img src="i1mages/1.png" /> 
<span class="1information"><1img src="i1mages/2.png" /></span> 
</div> 
</div> 


13.4.8 设计 跑步 效果 


本 例 设 计 一 个 跑步 动画 效果 ， 主 要 使 用 CSS3 帧 动画 控制 一 张 序 列 人 物 跑步 的 背景 图 像 ， 在 页 面 
固定 “镜头 ”中 快速 切换 实现 动画 效果 ， 如 图 13.39 所 示 。 


] localhost:8080/mysitie/ x BE 


GG | © localhost:8080/mysite/index1.html 


图 13.39 ”设计 跑步 效果 


【操作 步骤 】 
第 1 步 ， 设 计 舞 台 场 景 结 构 。 新 建 HIML 文档 ， 保 存 为 index1.html。 输 入 下 面 代码 : 
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<div class="charector-wrap " 1d="]s_wrap"> 
<div class="charector"></div> 
</div> 


第 2 步 ， 设 计 舞 台 基 本 样式 。 其 中 导入 的 图 片 是 一 个 序列 跑步 人 物 集 合 ， 如 图 13.40 所 示 。 


.charector-wrap { 
position: relative:; 
width: 180px: 
height: 300px:; 
left: $0%: 
margin-left: -90px: 


} 
.charector{ 
position: absolute: 
width: 180px: 
height:300px; 
backeround: url(img/charector.png) 0 0 no-Tepeat: 


图 13.40 小 人 序列 集合 


| 本 例 主要 设计 任务 就 是 让 序列 小 人 仅 显 示 一 个 ， 然 后 通过 CSS3 动画 ， 让 他 们 快速 闪现 在 指定 限 
定 框 中 。 
第 3 步 ， 设 计 动 男 关 键 帧 。 
(@keyframes person-normal{/# 跑 步 动画 名 称 状 
0% {background-position: 0 0;} 
14.3% {background-position: -180px 0:} 
28.6% {background-position: -360px 0;} 
42.9% {background-position: -540px 0;} 
$7.2% {background-position: -720px 0;} 
71.5% {background-position: -900px 0:} 
85.8% {background-position: -1080px 0;} 
100% {backeground-position: 0 0:} 
} 
第 4 步 ， 设 置 动画 属性 。 
.charector{ 
animation-iteration-count: infinite:/* 动 画 无 限 播放 */ 
animation-timing-function:step-start;* 马 上 跳 到 动画 每 一 结束 帆 的 状态 */ 
} 


第 5 步 ， 司 动 动画 ， 并 设置 动画 频率 。 


谍 局 动 动画 ， 并 控制 跑步 动作 频率 */ 
-charector{ 


. 374 。 


第 ] 3 章 设计 CSS3 动画 
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animation-name: person-normal; 
animation-duration: 800ms: 
} 


13.4.9 ”设计 折 倒 面板 


本 案例 使 用 CSS3 的 目标 伪 类 (:target) 设计 折 苇 面板 效果 ,没有 使 用 JavaScript 脚本 ,使 用 过 渡 
属性 设计 滑动 效果 。 折 车 动 画 效 果 如 图 13.41 所 示 。 


Xx 
> 外 - | 硬 http://localhost/test.html#one ~ 昌 邮 也 localhost x ut 让 


图 13.41 设计 折 和 登 面 板 


案例 主要 代码 如 下 : 


<style type="text/css"> 
访 定 义 折 车 框 外 框 样式 */ 
.accordion { 
background: #eee: 
border: 1px solid #999:; 
margin: 2em;} 
庶 定 义 折 车 框 标题 栏 样式 */ 
.accordion h2 { 
margin: 0; 
padding: 12px 0; 
background:#CCC} 
庶 定 义 折 登 框 内 容 框 样式 */ 
.accordion .section { 
border-bottom: 1px solid 此 cc: 
background: #fff:} 
庶 定 义 折 车 框 选 项 标题 栏 样 式 */ 
.accordion h3 { 
margin:0; 
padding:0: 
background: #eee: 
padding:3px lem:;} 
谍 定 义 折 车 框 选项 标题 栏 超 链 接 样 式 */ 


.accordion h3 a { 
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& 


font-weight: normal:; 
text-decoration:none;} 
谍 当 获得 目标 焦点 时 ， 粗 体 显 示 选 项 标题 栏 文字 */ 
.accordion :target h3 a {font-weight: bold:} 
谍 选 项 栏 标 题 对 应 的 选项 子 框 样式 */ 
.accordion h3 + dv { 
height: 0; 
padding:0 lem: 
overflow: hidden: 
人 # 定 义 过 渡 对 象 为 高 度 ， 过 渡 时 间 为 0.3s， 渐 显 显示 */ 
transition: height 0.3s ease-In:} 
.accordion h3 + div 1mg {margin:4px;} 
谍 当 获得 目标 焦点 时 ， 子 选项 内 容 框 样式 */ 
.accordion :target h3 + div { 
人 # 当 获取 目标 之 后 ， 高 度 为 300px*/ 
helght:300pX: 
overflow:auto:} 
</style> 
<div class="accordion"> 
<h2> 我 爱 买 <h2> 
<div 1d="one" class="section"> 
<h3> <a href="#one"> 爱 得 </a> </h3> 
<div><lmg src="images/11.png"></div> 
</div> 
<div 1d="two" class="section"> 
<h3> <a href="#two"> 爱 美丽 </a> </h3> 
<div><1mg src="1mages/22.png"></div> 
</div> 
<div 1d="three" class="section"> 
<h3> <a hre 人 ="#three"> 爱 吃 </a> </h3> 
<div><1mg src="1mages/33.png"></div> 
</div> 
</div> 


13.5 在 线 练 司 


本 节 练 习 CSS3 动画 一 般 设 计 方 法 ， 培 养 灵活 应 用 交互 式 动 态 样式 的 基本 能 力 。 感 
以 扫 码 练习 。 
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使 用 CSS3 媒体 查询 


2017 年 9 月 ，W3C 发 布 了 媒体 查询 ( Media Query Level 4 ) 候选 推荐 标准 规范 ， 它 扩 
展 了 已 经 发 布 的 媒体 查询 的 功能 。 该 规范 用 于 CSS 的 @media 规则 ， 可 以 为 文档 设 定 特定 条 
件 的 样式 ， 也 可 用 于 HTML、JavaScript 等 语言 中 。 

权威 参考 : http://www.w3.org/TR/css3-mediaqueries/。 


【 学 习 重 点 】 

WI 了 解 CSS3 媒体 类 型 。 

MI 正常 使 用 媒体 查询 的 条 件 规则 。 
WD 设计 响应 不 同 设备 的 网 页 布局 。 
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14.1 媒体 查询 基础 


媒体 查询 可 以 根据 设备 特性 ， 如 屏 笑 宽 度 、 口 度 和 设备 方 同 〈( 横 同 或 纵 同 )， 为 设备 定义 独立 的 


Css 样式 表 。 一 个 媒体 查询 由 一 个 可 选 的 媒体 类 型 和 零 个 或 多 个 限制 范围 的 表达 式 组 成 ， 如 宽度 、 高 


” 度 和 颜色 。 
: 14.1.1 媒体 类 型 和 巡 体 查询 


CSS2 提出 媒体 类 型 (Media Type) 的 概念 ， 它 允许 为 样式 表 设 置 限制 范围 的 媒体 类 型 。 例 如 ， 仅 


” 供 打 印 的 样式 表 文件 、 仅 供 手机 泻 染 的 样式 表 文件 、 仅 供电 视 泻 染 的 样式 表 文件 等 , 具体 说 明 如 表 14.1 


”所 示 。 
表 14.1 CSS 媒体 类 型 
类 型 | 支持 的 浏览 器 | 说 _ 明 
”Opera | 用 于 语音 和 音乐 合成 器 
a -om 用 于 触觉 反馈 设备 
de 用 于 小 型 或 手持 设备 
全 用 于 打印 机 
Drojection om 用 于 投影 图 像 ， 如 幻灯 片 
screen 用 于 屏幕 显示 器 
用 于 使 用 固定 间距 字符 格 的 设备 , 如 电 传 打字 机 和 终端 
tv 用 于 电视 类 设备 
embossed AS | 用 于 〈 直 文 ) 印刷 设备 
speech se 用 于 语音 类 
all 用 于 ee 


通过 HTML 标签 属性 media 定义 样式 表 的 媒体 类 型 ， 具 体 方法 如 下 : 
加 ”定义 外 部 样式 表 文件 的 媒体 类 型 。 


<link hre 伟 "csss.css" rel="stylesheet" type="text/css" media="handheld" /> 


回 “定义 内 部 样式 表 文 件 的 媒体 类 型 。 
<style type="text/css" medla= "screen "> 


</style> 

CSS3 在 媒体 类 型 基础 上 ， 提 出 了 Media Queries (媒体 查询 ) 的 概念。 媒体 查询 比 CSS2 的 媒体 
”类 型 功 和 泌 更 强大 、 更 加 完善 。 两 者 主要 区 别 : 媒体 查询 是 一 个 值 或 一 个 范围 的 值 ， 而 媒体 类 型 仅仅 是 
”设备 的 匹配 。 媒体 类 型 可 以 帮助 用 户 获 取 以 下 数据 : 

加 浏览 器 窗口 的 宽 和 高 。 

回 ”设备 的 宽 和 高 。 

设备 的 手持 方 同 : 横 同 还 是 竖 问 。 

加 ”分辨 率 。 
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例如 , 下 面 这 条 导入 外 部 样式 表 的 语句 , 在 media 属性 中 设置 媒体 查询 的 条 件 (max-width: 600px): / 
当 屏幕 宽度 小 于 或 等 于 600px 时 ， 则 调用 small.css 样式 表 来 演 染 页 面 。 | 


<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> | 


14.1.2 medla 


CSS3 使 用 @media 规则 定义 媒体 查询 ， 简 化 语法 格式 如 下 : 
(media [only | not] <media_type> [and <expresslon>]* | <expression> [and <expression>|]*{ 
/*CSS 样式 列表 */ 

} 

参数 简单 说 明 如 下 。 

<media type>: 指定 媒体 类 型 ， 有 具体 说 明 参 考 表 14.1。 

<expression>: 指定 媒体 特性 。 放 在 一 对 圆 括 号 中 ， 如 (min-width:400px)。 

逻辑 运算 符 ， 如 and〈 逻 辑 与 ) 、not (逻辑 否 ) 、only (兼容 设备 ) 等 。 

媒体 特性 包括 13 种 ， 接 受 单个 的 多 辑 表达 式 作为 值 或 者 没有 值 。 大 部 分 特性 接受 min 或 max 的 
前 缀 ， 用 来 表示 大 于 等 于 或 者 小 于 等 于 的 逻辑 ， 以 此 避免 使 用 大 于 号 〈> ) 和 小 于 号 〈<) 字符。 下面 
是 各 种 媒体 特性 的 简单 说 明 。 

1. 颜色 (color) 


指定 输出 设备 每 个 像素 单元 的 比特 值 。 接 受 min/max 前 级 。 例如， 向 每 个 颜色 单元 至 少 有 4 个 比 
特 的 设备 应 用 样式 表 : 


(Qmedia all and (min-color: 4) {...} 


2. 颜色 索引 (color-index) 


指定 输出 设备 中 颜色 查询 表 中 的 条 目 数量 。 接受 min/max 前 缀 。 例 如 ， 癌 所 有 使 用 索引 颜色 的 设 
备 应 用 样式 表 : 


(Qmedia all and (color-index) {...} 


3. 宽 高 比 (aspect-ratio) 


指定 输出 设备 目标 显示 区 域 的 宽 高 比 。 取 值 包含 两 个 以 “/” 分 隔 的 正 整数 ， 代 表 水 平 像素 数 与 
答 直 像素 数 的 比例 。 接 受 min/max 前 绥 。 例 如 ， 下 面 为 显示 区 域 宽 高 比 至 少 为 一 比 一 的 设备 选择 了 一 
个 特殊 的 样式 表 : 


(media screen and (min-aspect-ratio: 1/1) {...} 


4. 设备 宽 高 比 〈device-aspect-ratio ) 
指定 输出 设备 的 宽 高 比 。 接 受 min/max 前 级 。 例 如 ， 下 面 为 宽屏 设备 选择 了 一 个 特殊 的 样式 表 : 
加 

5. 设备 高 度 〈device-height ) 

指定 输出 设备 的 高 度 。 接 受 min/max 前 级 。 例 如 ， 在 最 大 宽度 “800px” 的 屏幕 上 应 用 样式 表 : 
es 
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6. 设备 宽度 (device-width) 
指定 输出 设备 的 宽度 。 接 受 min/max 前 级 。 
7. 网 格 (grid) 
会 内 判断 输出 设备 是 网 格 设备 还 是 位 图 设备 。 如 果 设 备 是 基于 网 格 的 (如 电 传 打字 机 )， 该 值 为 1， 
Note 否则 为 0。 例 如， 同一 个 15 字符 宽度 或 更 罕 的 手持 设备 应 用 样式 : 
(Qmedia handheld and (grid) and (max-width: 1Sem) {...} 


8. 高度 (height) 

指定 输出 设备 泻 染 区 域 的 高 度 。 接 受 min/max 前 级 。 

9. 黑 日 (monochrome) 

指定 一 个 黑白 设备 每 个 像素 的 比特 数 。 接 受 min/max 前 级 。 例如， 向 所 有 黑白 设备 应 用 样式 表 : 
(QQmedia all and (monochrome) {...} 

10. 方 回 〈orientation ) 


指定 设备 处 于 横 屏 《宽度 大 于 高 度 ) 模式 还 是 竖 屏 (高 度 大 于 宽度 ) 模式 。 取 值 包 括 landscape 
( 横 屏 ) 和 portrait( 竖 屏 )。 例 如 ， 癌 竖 屏 设备 应 用 样式 表 : 


(@media all and (orientation: portrait) {...} 

11. 分 辨 率 (resolution ) 

指定 输出 设备 的 分 辨 率 。 接 受 min/max 前 级 。 例 如 ， 为 每 英寸 至 少 300 点 的 打印 机 应 用 样式 : 
(QQmedia print and (min-resolution: 300dp1) {...} 

12. 扫描 (scan) 


指定 电视 输出 设备 的 扫描 过程。 取 值 包括 progressive 和 interlace (交错 )。 例 如 ， 同 以 顺序 方式 
扫描 的 电视 机 上 应 用 样式 表 : 


@media tv and (scan: progressive) {...} 
13. 宽度 (width) 


指定 输出 设备 泻 染 区 域 的 宽度 。 接 受 min/max 前 级 。 例 如 ， 癌 宽度 在 500px 和 800px 之 间 的 屏 
幕 应 用 样式 表 : 


(media screen and (min-width: S00px) and (max-width: 800px) {...} 


在 CSS 样式 的 开头 必须 定义 @media 关键 字 ， 然 后 指定 媒体 类 型 ， 再 指定 媒体 特性 。 媒 体 特性 的 
格式 与 样式 的 格式 相似 ， 分 为 两 部 分 ， 由 冒号 分 隔 ， 冒 号 前 指定 媒体 特性 ， 冒 号 后 指定 该 特性 的 值 。 
例如 ， 下 面 语句 指定 了 当 设 备 显示 屏幕 宽度 小 于 640px 时 所 使 用 的 样式 。 
(media screen and (max-width: 639px) { 
谍 样 式 代码 */ 
} 


可 以 使 用 多 个 媒体 查询 将 同一 个 样式 应 用 于 不 同 的 媒体 类 型 和 媒体 特性 中 , 媒体 查询 之 间 通 过 去 
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号 分 隔 ， 类 似 于 选择 器 分 组 。 
@media handheld and (min-width:360px),screen and (min-width:480px) { 
/# 样 式 代码 所 


可 以 在 表达 式 中 加 上 not、only 和 and 等 逻辑 运算 符 。 


/下 面 样 式 代 码 将 被 使 用 在 除 便携 设备 之 外 的 其 他 设备 或 非 彩 色 便 携 设备 中 
(Omedlia not handheld and (color) { 
放样 式 代码 */ 


} 
/下 面 样式 代码 将 被 使 用 在 所 有 非 彩色 设备 中 


(media all and (not color) { 
谍 样 式 代码 */ 


} 
only 运算 符 能 够 让 不 支持 媒体 得 询 但 文 持 媒体 类 型 的 设备 ， 忽 略 表达 式 中 的 样式 。 例 如 : 


(media only screen and (color) { 
谍 样 式 代码 */ 
} 


对 于 文 持 媒体 查询 的 设备 来 说 ， 能 够 正确 地 读 取 其 中 的 样式 ， 念 佛 only 运算 符 不 存在 一 样 ， 对 


于 不 支持 媒体 查询 但 支持 媒体 类 型 的 设备 (如 下 8) 来 说 ,可 以 识别 @media screen 关键 字 , 但 是 由 于 


先 读 取 的 是 only 运算 符 ， 而 不 是 screen 关键 字 ， 将 忽略 这 个 样式 。 
会 提示 : 媒体 查询 也 可 以 用 在 @import 规则 和 <link> 标 签 中 。 例 如 : 


(Qimport url(example.css) Screen and (width:800px); 
人 # 下 面 代码 定义 了 如 果 页 面 通过 屏幕 呈现 ， 且 屏幕 宽度 不 超过 480px， 则 加 载 shetland.css 样式 表 */ 
<link rel="stylesheet" type="text/css" medla= "screen and (max-device-width: 480px)" href—="shetland.css" /> 


14.1.3 应 用 @media 


【示例 1】and 运算 符 用 于 符号 两 边 规 则 均 满 足 条 件 的 匹配 。 
(media screen and (max-width: 600px) { 
/# 匹 配 宽 度 小 于 等 于 600px 的 屏幕 设备 */ 
上 
【示例 2】not 运算 符 用 于 取 非 ， 所 有 不 满足 该 规则 的 均 匹 配 。 
(QQmedia not print { 
谍 匹 配 除 了 打印 机 以 外 的 所 有 设备 */ 
} 
< 人 注意 : not 仅 应 用 于 整个 媒体 查询 。 
(QQmedia not all and (max-width: S00px) {} 
广 等 价 于 */ 
(QQmedia not (all and (max-width: S00px)) {} 
诺 而 不 是 */ 
(Omedia (not all) and (max-width: S00px) {} 
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在 逗号 媒体 得 询 列 表 中 ，not 仅 会 否定 它 所 在 的 媒体 音 询 ， 而 不 影 啊 其 他 的 媒体 得 询 。 
如 果 在 复杂 的 条 件 中 使 用 not 运算 符 ， 要 显 式 添加 小 括号 ， 避 免 改 义 。 
【示例 3】 吉 号 〈,) 相当 于 or 运算 符 ， 用 于 两 边 有 一 条 规则 满足 则 匹配 。 
(QQmedia screen, (min-width: 800px) { 
人 # 匹 配 屏幕 或 者 宽度 大 于 等 于 800px 的 设备 */ 
} 
【示例 4】 在 媒体 类 型 中 ，all 是 默认 值 ， 匹 配 所 有 设备 。 
COmedia all { 
谍 可 以 过 滤 不 文 持 media 的 浏览 器 */ 
} 


常用 的 媒体 类 型 还 有 screen 匹配 屏幕 显示 器 、print 匹配 打印 输出 ,更 多 媒体 类 型 可 以 参考 表 14.1。 
【示例 S】 使 用 媒体 查询 时 ， 必 须要 加 括号 ， 一 个 括号 就 是 一 个 查询 。 


(media (max-width: 600px) { 
上 诺 匹 配 界 面 宽度 小 于 等 于 600px 的 设备 */ 
} 
(Omedia (min-width: 400px) { 
/匹配 界面 宽度 大 于 等 于 400px 的 设备 */ 
} 
(Omedia (max-device-width: 800px) { 
诺 匹 配 设备 ( 不 是 界面 ) 宽度 小 于 等 于 800px 的 设备 */ 
} 
(media (min-device-width: 600px) { 
人/# 匹 配 设 备 《〈 不 是 界面 ) 宽度 大 于 等 于 600px 的 设备 */ 
} 


人 富 提示 : 在 设计 手机 网 页 时 ， 应 该 使 用 device-width/device-height， 因 为 手机 浏览 器 默认 会 对 页 面 


进行 一 些 缩 放 ， 如 果 按 照 设 备 宽 高 来 进行 匹配 ， 会 更 接近 预期 的 效果 。 
【示例 6】 媒 体 查 询 允 许 相 互 嵌 套 ， 这 样 可 以 优化 代码 ， 避 免 元 余 。 


(media not print { 
/# 通 用 样式 类 
(QQmedia (max-width: 600px) { 
/# 此 条 匹配 宽度 小 于 等 于 600px 的 非 打 印 机 设备 */ 
} 
(media (min-width: 600px) { 
/# 此 条 匹配 宽度 大 于 等 于 600px 的 非 打 印 机 设备 */ 
} 


【示例 7 在 设计 响应 式 页 面 时 ， 用 户 应 该 根据 实际 需要 ， 先 确定 目 适 应 分 辨 率 的 国 值 ， 也 就 是 


”页面 响应 的 临界 点 。 


(media (min-width: 768px){ 
/*>=768px 的 设备 */ 

} 

media (min-width: 992px){ 
/#>=992pXx 的 设备 */ 
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} 
@media (min-width: 1200){ 
/*>=1200px 的 设备 */ 


< 负 注意 : 下 面 样式 顺序 是 错误 的 ， 因 为 后 面 的 查询 范围 将 履 盖 前 面 的 查询 范围 ， 导 致 前 面 的 媒体 查 洒 


的 和 让 
@media (min-width: 1200){ } 
(Omedia (min-width: 992px){ } 
(QQmedia (min-width: 768px){ } 
因此 ， 当 使 用 min-width 媒体 特性 时 ， 应 该 按 从 小 到 大 的 顺序 设计 各 个 阅 值 。 同 理 ， 如 果 
使 用 max-width， 就 应 该 按 从 大 到 小 的 顺序 设计 各 个 靖 值 。 
@media (max-width: 1199){ 

/六 <=]1199px 的 设备 */ 


} 

(Omedia (max-width: 991px){ 
/**<=991px 的 设备 */ 

} 


@media (max-width: 767px){ 
/*<=768px 的 设备 */ 
} 


【示例 8】 用 户 可 以 创建 多 个 样式 表 ， 以 适应 不 同 媒 体 类 型 的 宽度 范围 。 当 然 ， 更 有 效率 的 方法 
是 将 多 个 媒体 香 询 整合 在 一 个 样式 表 文 件 中 ， 这 样 可 以 减少 请 求 的 数量 。 
(Omedia only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
访 样 式 列 表 */ 
} 
media only screen and (min-width: 321px) { 
访 样 式 列表 */ 
} 
(media only screen and (max-width: 320px) { 
访 样 式 列表 */ 
} 


【示例 9】 如 果 从 资源 的 组 织 和 维护 的 角度 考虑 ， 可 以 选择 使 用 多 个 样式 表 的 方式 来 实现 媒体 合 ， 
询 ， 这 样 做 更 高 效 。 


<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> 
<link rel="stylesheet" media="print" href—"print.css" /> 


【示例 10】 使 用 orientation 属性 可 以 判断 设备 屏幕 当前 是 横 屏 〈 值 为 landscape)， 还 是 竖 屏 〈 值 ] 
为 portrait)。 


(QQmedia screen and (orientation: landscape) { 


.lPadLandscape { 
width: 30%: 
float: right: 

} 


。 383。 


0 (sss 网页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


(Omedia screen and (orientation: portralt) { 
.1PadPortrait {clear: both:} 


知 - | 不 过 orientation 属性 只 在 iPad 上 有 效 , 对 于 其 他 可 转 屏 的 设备 (如 iPhone), 可 以 使 用 min-device- 
a width 和 max-device-width 来 变通 实现 。 
_Note 四 


媒体 查询 仅 是 一 种 纯 CSS 方式 实现 啊 应 式 Web 设计 的 方法 ， 用 户 还 可 以 使 用 JavaScript 库 来 实 
， 现 同样 的 设计 。 例 如 ， 下 载 css3-mediaqueries.js (http://code.google.com/p/css3-mediaqueries-js/)， 然 后 
”在 页 面 中 调用 。 对 于 老式 浏览 器 (如 IE6~IE8) 可 以 考虑 使 用 css3-mediaqueries.js 进行 兼容 。 

| <!—[1f 1tIE 9]> 

<script src="http://css3-mediaqueries-]s.googlecode.com/svn/trunk/css3-mediaqueries.]s”></script> 

<![endif]—> 

| 【示例 11】 下 面 代 码 演 示 了 如 何 使 用 jQuery 来 检测 浏览 器 宽度 ， 并 为 不 同 的 视 口 调用 不 同 的 样 
| 却 表 o 


<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/Jquery/1.9.1/}query.min.]s"></script> 
<script type="text/Javascript"> 
$(document).ready(function(){ 
$(window).bind("resize", resize Window); 
function resize Window(e){ 
var newWindowWidth = $(window).width(); 
if(newWindowWidth < 600){ 
$("link[rel=stylesheet]").attr( {href: "mobile.css"}); 
} 
else if{(newWindowWidth > 600){ 
$("link[rel=stylesheet]").attr( {href: "style.css"}); 


14.2 案例 实战 


，， 本 节 将 通过 几 个 案例 练习 CSS3 媒体 查询 的 网 页 应 用 。 
| srnflie 一 i 

14.2.1 判断 显示 屏幕 宽度 

得， 本 例 演示 如 何 正确 使 用 @media 规则 ， 判 断 当 前 视 口 宽度 的 范围 。 代 码 如 下 : 


<style type="text/css"> 

.Wrapper {* 定 义 测试 条 的 样式 */ 
padding: Spx 10px: margin: 40px; 
text-align:center; color:#999; 
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border: solid 1px #999:; 


} 
.Viewing-area span {/* 默 认 情况 下 隐藏 提示 文本 信息 */ 
color: #666: 
display: none: | 生 
} ui 
/# 应 用 于 移动 设备 ， 且 设备 最 大 宽度 为 480px*/ Note 


(QQmedia screen and (max-device-width: 480px) { 
.a {background: #ccc:} 


} 
人/# 显 示 屏 幕 宽度 小 于 等 于 600px*/ 
(media screen and (max-width: 600px) { 
bt 
background: red: color:#fif: 
border: solid 1px #000; 
} 
span.lt600 {display: nline-block:} 


} 
人/# 显 示 屏 幕 宽度 介 于 600px 和 900px 之 间 */ 
(media screen and (min-width: 600px) and (max-width: 900px) { 
| 
background: red; color:#fff: 
border: solid 1px #000; 
} 
span.bt600-900 {display: inline-block:} 


} 
人/# 显 示 屏 幕 宽 度 大 于 等 于 900px*/ 
(media screen and (min-width: 900px) { 
df{ 
background: red: color:#fff: 
border: solid 1px #000; 


} 

span.gt900 {display: Inline-block:} 
} 
</style> 


<div class="wrapper a"> 设 备 最 大 宽度 为 480 像素 。</div> 
<div class="wrapper b"> 显 示 屏 幕 宽度 小 于 等 于 600 像素 </div> 
<div class="wrapper c"> 显 示 屏 幕 宽度 介 于 600 像素 到 900 像素 之 间 </div> 
<div class="wrapper d"> 显 示 屏 幕 宽 度 大 于 等 于 900 像素 </div> 
<p class="viewing-area"> 
<strong> 当 前 显示 屏幕 宽度 : </strong> 
<span class="lt600"> 小 于 等 于 600px</span> 
<span class="bt600-900"> 介 于 600px - 900px 之 间 </span> 
<span class="gt900"> 大 于 等 于 900px</span> 
</p> 


本 例 设 计 当 显示 屏幕 宽度 小 于 等 于 600px 时 ， 则 高 完 显 示 <div class="wrapper b"> 测 试 条 ， 并 在 底 
部 显示 提示 信息 : 小 于 等 于 600px; 当 显 示 屏 幕 宽度 介 于 600px 和 900px 之 间 时 ， 则 高 之 显示 <div 
class="wrapper c"> 测 试 条 ， 并 在 底部 显示 提示 信息 : 介 于 600px 一 900px 之 间 ; 显示 屏幕 宽度 大 于 等 ， 
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于 900px 时 ， 则 高 亮 显示 <div class="wrapper d"> 测 试 条 ， 并 在 底部 显示 提示 信息 : 大 于 等 于 900px:; 
， 当 设备 宽度 小 于 等 于 480px 时 ， 则 高 亮 显 示 <div class="wrapper a"> 测 试 条 。 演 示 效 果 如 图 14.1 所 示 。 


x x 


2 Sh 局 http://localho.. * 号 © 名 |ocalhost 女 > 外 -| 大 http://localhost:8080/my ~ 0 | Blocalhost x 合 太 六 


当前 显示 屏幕 宽度 ， 介 于 600px_900px 之 间 


x 


ET TT" * 


显示 屏幕 高度 小 于 等 于 600 像 志 


昂 示 屏幕 充 度 介 于 600 像 索 到 900 


当前 显示 屏幕 宽度 ; 大 丁 于 本 900px 


显示 屏幕 宽度 大 于 等 于 900px 
图 14.1 使 用 @media 规则 


14.2.2 设计 响应 式 版 式 


本 例 在 页 面 中 设计 3 个 栏目 。 
回 ”<div id="main">: 主要 内 容 栏 目 。 
<div id="sub">: 次 要 内 容 栏目 。 
回 ”<div id="sidebar">: 侧 边 栏 栏 目 。 
构建 的 页 面 结构 如 下 : 
<div 1d="container"> 
<div 1d="wrapper"> 
<div 1d="main"> 
<h1l> 水 调 歌 头 。 明 月 几时 有 </hl> 
<h2> 苏 轼 </h2> 
“p> </p> 
</div> 
] <div id="sub"> 
] <h2> 宋 词 精 选 <h2> 


<ul> 
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< | /li 
</ul> 
</div> 
</div> | 
<div 1d="sidebar"> | 省 4 
<h2> 词 人 列表 </h2> Wi 
<ub> TVote 
Ell | 
</ul> 
</div> 
</div> 


设计 页 面 能 够 自 适 应 屏幕 宽度 ， 呈 现 不 同 的 版 式 布 局 。 当 显示 屏幕 宽度 在 999px 以 上 时 , 让 3 个 
栏目 并 列 显示 ; 当 显 示 屏 幕 宽度 在 639px 以 上 、1000px 以 下 时 ， 设 计 两 栏 显示 ; 当 显示 屏幕 宽度 在 
640px 以 下 时 ， 让 3 个 栏目 堆 琶 显 示 。 


<style type="text/css"> 

信 默认 样式 */ 

诬 网 页 宽度 固定 ， 并 居中 显示 */ 

#container {width: 960px: margin: auto;} 

/# 主 体 宽度 #/ 

#wrapper {width: 740px: float: left:} 

席 设 计 3 栏 并 列 显 示 */ 

#main {width: $20px; float: right;} 

#sub {width: 200px: float: left: } 

#sidebar { width: 200px: float: right:} 

/# 窗 口 宽度 在 999px 以 上 */ 

(media screen and (min-width: 1000px) { 
/*3 栏 显示 */ 
#container {width: 1000px:} 
#wrapper {width: 780px: float: left:} 
#maimn {width: S60px: float: right:} 
#sub {width: 200px: float: left; } 
#sidebar {width: 200px: float: nght:} 


} 

/* 窗 口 宽度 在 639px 以 上 、1000px 以 下 */ 

(QQmedia screen and (min-width: 640px) and (max-width: 999px) { 
谍 两 栏 显示 */ 
#container {width: 640px; } 
#wrapper {width: 640px: float: none;} 
.height {line-height: 300px: } 
#maimn {width: 420px: float: right:} 
#sub {width: 200px: float: left; } 
#sidebar {width: 100%: float: none;} 

} 

/# 窗 口 宽 度 在 640px 以 下 */ 

(media screen and (max-width: 639px) { 
/#] 栏 显示 */ 
#container {width: 100%:} 
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| 

] #wrapper {width: 100%; float: none:} 
| #main {width: 100%; float: none;} 

| #sub {width: 100%;: float: none:} 

| #sidebar {width: 100%: float: none:;) 
| } 

</style> 


当 显 示 屏 幕 宽 度 在 999px 以 上 时 ，3 栏 并 列 显示 ， 预 览 效 果 如 图 14.2 所 示 。 


He 
水 调 歌 头 - 明 月 几时 有 辐 人 列表 


苏 ， 陆 这 
苏轼 - 大 
两 质 中 秋 ， 歌 饮 达 旦 ， 大 酬 ， 作 此 简 ， 兼 怀 子 由 。 ， 相 永 


明月 几时 有 ? 把 酒 问 青 天 。 不 知 天 上 宫 阅 ， 今 尹 是 条 年 。 我 葡 乘 风 归 去 ， 又 瓦 琼 
楼 玉宇 ， 高 处 不 胜 寄 。 起 琴 弄 清 影 ， 何 似 在 人 | 间 ? 


转 朱 赂 ， 侨 荣 己 ， 照 无 根 。 不 应 有 恨 ， 和 有 事 长 向 别 时 圆 ? 人 有 悲 欢 高 侣 ， 月 有 阴 
晴 圆 缺 ， 此 事 古 难 全 。 但 原作 长久 , 干 里 共 婵 娟 。 


图 14.2 显示 屏幕 宽度 在 999px 以 上 时 页 面 显 示 效 果 


当 显 示 屏 幕 宽 度 在 639px 以 上 、1000px 以 下 时 ， 两 栏 显示 ， 预 览 效果 如 图 14.3 所 示 ; 当 显 示 屏 
幕 宽度 在 640px 以 下 时 ，3 个 栏目 从 上 往 下 堆 苔 显示 ， 预 览 效果 如 图 14.4 所 示 。 


Xx 


€ 5 [CHE ET CT + 


水 调 歌 头 :明月 几时 有 
苏轼 
两 扶 中 秋 ， 其 饮 达 旦 大 醉 ， 作 此 篇， 养子 由 


明月 几时 有 时 把酒 问 青玉。 不 知 天 上 写 阅 ， 今 乡 是 何 年 。 我 欲 素 风 明 去 ， 叉 如 球 楼 
玉宇 ， 高 处 不 胜 索 。 起 舞 弄 清 影 ， 和 何 似 在 人 间 ? 


SS 田 、 并 httpy//localhost:3080/mysiteftest.htm "6 全 友 这 py ed 大 有 翡 欢 高 襄 ， 月 有 阳 晤 


水 调 歌 头 .明月 几时 有 ee 


两 展 中 鸭 ， 殿 饮 达 旦 ， 大 醉 ， 作 此 蔽 ， 兼 怀 子 由 。 


明月 几时 有 ? 把 酒 问 青天 。 不知 天 上 富 效 ， 今 让 星 何 年 。 我 ee Re 
北 蒜 风 旧 去 ， 又 鸡 琼 楼 玉宇 ， 高 处 不 胜 案 。 起 甘 弄 清 绢 ， 何 词 人 列表 
人 
于 


似 在 人 间 ? 


Ee A 昭 天 上 也。 不 度 有 恨 ， 和 何事 长 向 别 时 图 ? 。 李 清明 


转 朱 
有 悲 次 离 侣 ， 月 有 阴 睛 加 缺 ， 此 事 古 难 全 。 悍 区 人 长 丸 ， 。 荔 四 
旺 其 旭 炳 = ， 元 永 


14.3 ”宽度 在 639px 以 上 、1000px 以 下 时 效果 14.4 宽度 在 640px 以 下 时 效果 


14.2.3 设计 响应 式 菜单 


本 例 设 计 一 个 啊 应 式 菜 单 ， 能 够 根据 设备 显示 不 同 的 伸缩 盒 布 局 效果 。 在 小 屏 设 备 上 ， 从 上 到 下 
显示 ; 在 默认 状态 下 ， 从 左 到 右 显 示 ， 右 对 齐 盒 子 ; 当 设 备 小 于 801px 时 ， 设 计 导 航 项 目 分 散 对 齐 显 
示 ， 预 览 效 果 如 图 14.5 所 示 。 


bE OE ET TE PR ee 
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D localhost/mysite/testt x 邮 localhost/mysite/test.ht x 


C&C [Dlocalhost/r ss © | localhcst/mysite/test.htn 


小 于 601px 屏幕 介 于 600px 和 800px 之 间 设 备 


DD localhost/mysite/test.ht x 


© [localhost/mysite/test.html 


大 于 799px 屏幕 
图 14.5 ”定义 伸缩 项 目 居中 显示 


主要 代码 如 下 : 


<style type="text/css"> 
谍 默 认 伸缩 布局 */ 
.navigation { 
list-style: none; 
margin: 0; 
backeground: deepskyblue; 
谍 启 动 伸缩 盒 布局 */ 
display: -weblat-box: 
display: -moz-box: 
display: -ms-flexbox: 
display: -webkit-flex; 
display: flex; 
-webkit-flex-flow: row wrap; 
人 # 所 有 列 面 问 主 轴 终 点 位 置 靠 齐 类 
Justify-content: flex-end 
} 
此 设计 导航 条 内 超 链接 默认 样式 */ 
.navigation a {text-decoration: none; display: block: padding: lem:; color: white;} 
此 设计 导航 条 内 超 链 接 在 鼠标 经 过 时 的 样式 */ 
.navigation a:hover {background: blue;} 
/# 在 小 于 801px 设备 下 伸缩 布局 */ 
(media all and (max-width: 800px) { 
. 访 当 在 中 等 屏幕 中 ， 导 航 项 目 大 中 显示 ， 并 且 剩 余 空 间 平均 分 布 在 列表 之 间 */ 
.navigation {Justify-content: space-around;}} 
6#* 在 小 于 601px 设备 下 伸缩 布局 */ 
(media all and (max-width: 600px) { 
.navigation { /* 在 小 屏幕 下 ， 没 有 足够 空间 行 排 列 ， 可 以 换 成 列 排列 */ 


-webkit-flex-flow: column wrap: 
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flex-flow: column wrap; 
padding: 0;} 
.navigation a { 
text-align: center; 
padding: 10px:; 
border-top: 1px solid rgba(255,255,255,0.3); 
border-bottom: 1px solid rgba(0,0,0,0.1);} 
.navigation li:last-of-type a {border-bottom: none:} 
} 
</style> 
<ul class="navigation"> 
<]i><a hre 伍 "#"> 首 页 </a></l 这 
<li><a hre 住 "#"> 咨 询 </a></li> 
<]i><a hre 舍 "如 > 产品 </a></ 儿 > 
<]i><a hre 伍 "#"> 关 于 </a></l> 
</ul> 


14.2.4 设计 自动 隐藏 布局 


本 例 设计 一 个 啊 应 式 页 面 布局 效果 ， 并 能 根据 显示 屏幕 宽度 变化 目 动 隐藏 或 调整 版 式 显 示 。 
【操作 步骤 】 

第 1 步 ， 新 建 HIMLS 文档 ， 在 头 部 <head> 标 和 位 内 定义 视 口 信息 。 使 用 <meta> 标 签 设 置 视 口 缩放 
比例 为 1， 让 浏览 器 使 用 设备 的 宽度 作为 视图 的 宽度 ， 并 禁止 初始 缩放 。 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="viewport" content="width=device-width, nitial-scale=1.0"> 

</head> 


第 2 步 ，IE8 或 者 更 早 的 浏览 器 并 不 文 持 媒体 查询 ， 可 以 使 用 media-queries.js 或 者 respond.js 插 


” 件 进行 兼容 。 


<!--[Elt IE 9|> 
<script src="http://css3-mediaqueries-]s.googlecode.com/svn/trunk/css3-mediaqueries.]s"></script> 


<![endif]--> 
第 3 步 ， 设 计 页 面 HTML 结构 。 整 个 页 面 基本 布局 包括 头 部 、 内 容 、 侧 边栏 和 页 脚 。 内 容 容 器 


”宽度 是 600px， 而 侧 边栏 宽度 是 300px， 线 框图 如 图 14.6 所 示 。 


<div 1d="pagewrap"> 

<div 1d="header"> 
<h1> 唐 诗 赏 析 </h1> 

</div> 

<div 1d="content"> 
<hl> 水 调 歌 头 。 明 月 几时 有 <Amh1> 
<h2> 苏 轼 ~/h2> 
<p>...</p> 
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</div> 
<div 1d="sidebar"> 
<h2> 宋 词 精 选 </h2> 
<ul> 
<]>...</]> 
</ul> 
< dv> Note 
<div 1d="footer"> 
<h2> 词 人 列表 </h2> 
<ul> 
<]1>...</l> 
</ul> 


> 外 ， Ee hitp://localhost:S080/mysiteftest.html 


唐诗 赏析 


水 调 歌 头 :明月 几时 有 
苏轼 
两 导 中 状 ， 欢 饮 达 日 ， 大 栈 ， 作 此 简 ， 藉 怀 子 由 。 


明月 几时 有 ? 把 酒 问 青天 。 不 知 天 上 宫 内 ， 他 是 多年 。 我 欲 滋 风 上 归 去 ， 又 妃 琼 楼 玉 
宇 ， 高 处 不 胜 态 。 起 基 弄 清 影 ， 何 似 在 人 间 


转 朱 净 ， 供 绮 户 ， 朋 无 眼 。 不 应 有 恨 ， 息 刘 长 同 8jj 回 ? 人 有 东 葡 离合 ， 月 有 阴 晴 贺 
扇 ， 此 事 占 维 宇 。 但 愿 人 长 久 ， 千 里 共 婵 娟 


词 人 列表 


， 陆游 
李靖 昭 


图 14.6 设计 页 面 结构 


第 4 步 ， 使 用 CSS3 媒体 得 询 设计 当 视 图 宽度 小 于 等 于 980px 时 ， 如 下 规则 生效 。 将 所 有 的 容器 
宽度 从 像素 值 设置 为 百分比 以 使 得 容器 大 小 目 适 应 。 


上 # 当 窗口 视图 小 于 等 于 980px 时 响应 下 面 样式 */ 
(media screen and (max-width: 980px) { 
#pagewrap {width: 94%:;} 
#content {width: 65%:;} 
#sidebar {width: 30%:;} 
} 


第 5 步 ， 为 小 于 等 于 700px 的 视图 指定 <div id="content"> 和 <div id="sidebar"> 的 宽度 为 目 适应 ， 
并 且 清 除 浮动 ， 使 得 这 些 容 器 按 全 宽度 显示 。 


上 # 当 窗口 视图 小 于 等 于 700px 时 响应 下 面 样式 */ 
(Omedila screen and (max-width: 700px) { 
#content { 
width: auto: 
float: none: 
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| 
| } 


#sidebar { 
width: auto; 
| float: none: 
} 
第 6 步 ， 对 于 小 于 等 于 480px〈 手 机 屏幕 ) 的 情况 ， 将 hl 和 h2 的 字体 大 小 修改 为 16px， 并 隐藏 


侧 边栏 <div id="sidebar">。 


谍 当 窗口 视图 小 于 等 于 480px 时 响应 下 面 样式 */ 
(media screen and (max-width: 480px) { 

hl, h2 {font-size: 16px;} 

#sidebar {display: none;} 
} 


”第 7 步 ， 可 以 根据 需要 添加 更 多 媒体 查询 ， 目 的 在 于 为 指定 的 视图 宽度 指定 不 同 的 CSS 规则 ， 
”来 实现 不 同 的 布局 。 演 示 效 果 如 图 14.7 所 示 。 


| 
| 
| +) @ htpy/localhost:3080/mysite/testht ~ 昌 地 从 女 这 
| 唐诗 赏析 

i 

水 调 歌 头 :明月 几时 有 

苏轼 

两 搬 中 秋 ， 欢 饮 达 日 ， 太 酬 ， 作 此 袖 ， 菲 杯子 由 。 


把 酒 回 青 天 。 不 知 天 上 宫 浆 ， 今 光 是 何 年 。 我 答 乘 风 归 去 ， 义 涩 琼 栈 玉 
处 沾 胜 寒 。 起 天 弄 清 影 ， 何 似 在 人 0? 


特 朱 阁 ， 低 锌 户 ， 昭 无眠。 不 应 有 恨 ， 何 训 长 同 别 时 加 ?人 有 莫 欢 离合 ， 月 有 阴 晴 圆 
轧 ， 此 事 古 蕉 全 。 但 原作 长 愉 , 干 蛙 共 樟 娟 。 


| 
| 宋 疗 精 选 


€ » [EEE ET ET CTE 
唐诗 赏析 
水 调 歌 头 .明月 几时 有 
劳 轼 
两 捅 中 灾 ， 欢 馈 达 日， 大 醉 ， 作 此 答 ， 兼 杯子 由 。 
明月 几时 有 ? 把 酒 问 青 天 。 不 知 夫 上 宫 阀 ， 今 儿 是 何 
年 。 我 议 冬 风 归 去 ， 有 又 念 琼 殿 玉 字 ， 高 处 不 胜 寒 。 起舞 
弄 清 影 ， 何 似 在 | 
低 绮 户 ， 照 无 照 。 不 应 有 恨 ， 和 何事 长 向 别 时 


. 声 声 慢 - 寻 了 寻 癌 mi 
| 而 委 兴 基 如 二 
. 更 多 


词 人 列表 


四 个 人 月 有 阴 随 圆 鼎 ， 此 事 古 难 全 。 但 原 
小 长久, 干 旦 共 阐 娟 。 


。 陆 洲 
. 寺 洁 昌 
- 区 入 
. 拖 永 


平板 屏幕 下 效果 手机 屏幕 下 效果 
图 14.7 ”设计 不 同 宽度 下 的 视图 效果 


澡 14.2.5 设计 自 适应 手机 页 面 


] 本 例 设计 页 面 宽 度 为 980px， 对 于 桌面 屏幕 来 说 ， 该 宽度 适用 于 任何 大 于 1024px 的 分 辨 率 。 通 

， 过 媒体 查询 监测 宽度 小 于 980px 的 设备 ,并 将 页 面 宽度 由 固定 方式 改 为 液态 版 式 , 布局 元 素 的 宽度 随 

， 着 浏览 器 窗口 的 尺寸 变化 进行 调整 。 当 可 视 部 分 的 宽度 进一步 减 小 到 650px 以 下 时 , 主要 内 容 部 分 的 
容器 宽度 会 增 大 到 全屏， 而 侧 边 栏 将 被 置 于 主 内 容 部 分 的 下 方 ， 整 个 页 面 变 为 单列 布局 。 演 示 效 果 如 
图 14.8 所 示 。 
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宋词 精 选 
卜 基于 - 称 梅 
两 再 怪 - 习 轩 吏 刺 
和 雨 亚 的 - 训 饰 否 切 
卜 其 子 - 环 簿 


更 杂 明月 几 讨 有? 把 厢 问 育 天 ， 趟 知 天 上 襄 阅 ， 今 少 是 问 年 。 我 谷 秘 风 归 去 ， 又 恐 玉 楼 玉 字 ， 
总 处 不 性 如 。 民 择 寺 注 8， 何 发 在 人 间 ? 


? 把 轻 问 否 天 。 不 天 上 宣 网 ,分 
何以 在 人 间 ? 


转 牛 阅 ， 作 畏 户 ， 囊 元 腿 ， 不 应 有 和 由 ， 问 对 长 向 别 困 国人 有 于 欢 融合 ， 委 有 队 玉 国庆 ， 


图 14.8 ”在 不 同 宽度 下 的 视图 效果 


叶 ， 问 


【操作 步骤 】 
第 1 步 ， 新 建 HTMLS5 文档 ， 构 建文 档 结构 ， 包 括 页 头 、 主 要 内 容 部 分 、 侧 边栏 和 页 脚 。 


<div 1d="pagewrap"> 
<header 1d="header"> 
<hgroup> 
<hl id="site-logo"> 网 站 LOGO</h1> 
<h2 id="site-description"> 网 站 描述 信息 </h2> 


</hgroup> 
<nav> 
<ul 1d="main-nav"> 
<]i><a hre 住 "#"> 导 航 链接 ， 可 以 扩展 </a></li> 
</ul> 
</nav> 
<form 1d="searchform"> 
<Input type="search"> 
</form> 
</header> 


<div 1d="content"> 
<article class="post"> 主 体内 容 区 域 </article> 
</div> 
<aside 1d="sidebar"> 
<section class="widget"> 侧 栏 栏 目 </section> 
</aside> 
<footer id="footer"> 页 脚 区 域 </footer> 
</div> 


第 2 步 ，IE9 之 前 浏览 器 不 支持 HIMLS 标签 ,使 用 html5.js 来 帮助 这 些 旧 版 本 的 正 浏览 器 创建 
HTMLS 元 素 节点 。 


<!--[1f lt IE 9]> 
<script src="http://html$shim.googlecode.com/svn/trunk/html$.]s"></script> 
<![endlfl--> 
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第 3 步 ， 设 计 HIML5 块 级 元 素 样式 ， 将 这 些 新 元 素 声 明 为 块 级 样式 。 
article, aslde, detalls, figcaption, figure, footer header hgroup, menu, nav, section {display: block:} 
第 4 步 ， 设 计 主要 结构 的 CSS 样式 。 这 里 将 注意 力 集中 在 整体 布局 上 。 整 体 设计 在 默认 情况 下 


”页 面容 器 的 固定 宽度 为 980px; 页 头 部 分 (header) 的 固定 高 度 为 160px; 主要 内 容 部 分 (content) 的 
”宽度 为 600px， 左 浮动 ， 侧 边栏 (sidebar)， 宽 度 为 280px， 右 浮动 。 


<style type="text/css"> 
#pagewrap { 
width: 980px: 
margin: 0 auto: 


} 
#header {height: 160px:} 
#content { 

width: 600px: 

float: left: 


} 
#sidebar { 
width: 280px: 
float: right: 
} 
#footer {clear: both:} 
</style> 


第 5 步 ， 调 用 css3-mediaqueries.js 文件 ， 解 决 IE8 及 其 以 前 版 本 不 支持 CSS3 媒体 得 询 的 问题 。 


<!--[1f lt IE 9]> 
<script src="http://css3-mediaqueries-]s.googlecode.com/svn/trunk/css3-mediaqueries.]s"></script> 
<![endif]--> 


第 6 步 ， 创 建 CSS 样式 表 ， 并 在 页 面 中 调用 。 
<link href—="media-queries.css" rel="stylesheet" type="text/css"> 
第 7 步 ， 借 助 媒体 查询 设计 自 适 应 布局 。 当 浏览 器 可 视 部 分 宽度 大 于 650px 小 于 981px 时 ， 将 


”pagewrap 的 宽度 设置 为 95%， 将 content 的 宽度 设置 为 60%， 将 sidebar 的 宽度 设置 为 30%。 


(media screen and (max-width: 980px) { 
#pagewrap {width: 95%:} 
#content { 
width: 60%: 
padding: 3% 4%; 
} 
#sidebar {width: 30%:} 
#sidebar .widget { 
padding: 8% 7%; 
margin-bottom: 10px; 


} 
第 8 步 ， 当 浏览 器 可 视 部 分 宽度 小 于 651px 时 ,将 header 的 高 度 设置 为 auto; 将 searchform 绝对 


”定位 在 top: 5px 的 位 置 ， 将 main-nav、site-logo、site-description 的 定位 设置 为 static; 将 content 的 宽 
| 度 设 置 为 auto〈 主 要 内 容 部 分 的 宽度 将 扩展 至 满 屏 )， 并 取消 float 设置 ; 将 sidebar 的 宽度 设置 为 100%， 
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并 取消 float 设置 。 


第 9 步 ， 当 浏览 器 可 视 部 分 宽度 小 于 481px (480px 是 传统 手机 横 屏 时 的 宽度 ) 时 ， 禁 用 HTML 
节点 的 字号 自动 调整 。 默 认 情 况 下 ， 手 机 会 将 过 小 的 字号 放大 ， 这 里 可 以 通过 -webkit-text-size-adjust 
属性 进行 调整 ， 将 main-nav 中 字号 设置 为 90%。 


第 10 步 ， 设 计 弹 性 图 片 。 为 图 片 设置 max-width: 100% 和 height: auto， 设 计 图 像 弹性 显示 。 


第 11 步 ， 设 计 弹 性 视频 。 对 于 视频 也 需要 做 max-width: 100% 的 设置 ， 但 是 Safari 对 embed 的 该 
属性 支持 不 是 很 好 ， 所 以 使 用 width: 100% 来 代替 。 
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height: auto; 
} 


第 12 步 ， 在 默认 情况 下 ， 手 机 端 Safari 浏览 器 会 对 页 面 进行 自动 缩放 ， 以 适应 屏幕 尺寸 。 这 里 可 
全 ”以 使 用 以 下 的 meta 设置 ， 将 设备 的 默认 宽度 作为 页 面 在 Safari 的 可 视 部 分 宽度 ， 并 禁止 初始 化 缩放 。 


| Note <meta name="viewport" content="width=device-width:; 1nitial-scale=1.0"> 


143 在 线 练 习 


本 节 专 题 练习 啊 应 式 网 页 设计 , 同时 复习 CSS3 的 重要 属性 ,强化 训练 应 用 CSS3 新 功能 的 能 力 。 
| 感 兴趣 的 读者 可 以 扫 码 练习 。 


。 3960 。 
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使 用 JavaScript 控制 CSS 样式 


在 网 页 设计 中 ， 经 常会 用 JavaScript 代码 控制 页 面 样式 ， 这 种 样式 也 称 为 脚本 样式 ， 因 
此 用 户 要 了 解 JavaScript 代码 的 基本 用 法 和 操作 CSS 样式 的 一 般 方 法 。 本 章 将 介绍 如 何 使 用 
JavaScript 控制 CSS 样式 来 设计 各 种 动态 效果 。 


【 学 习 重 点 】 


| 


| 
| 
| 
| 


了 解 使 用 JavaScript 控制 CSS 样式 的 方法 。 
使 用 JavaScript 控制 网 页 对 象 的 大 小 和 显 隐 。 
设计 运动 效果 ， 

设计 渐 隐 、 渐 显效 果 。 

企 网 页 中 添加 各 种 交互 式 响应 或 动态 特效 。 
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15.1 在 网 页 中 使 用 JavaScript 脚本 


JavaScript 是 目前 最 流行 、 应 用 最 广泛 的 Web 编程 语言 。 一 般 情 况 下 ，JavaScript 代码 只 能 够 在 网 
页 中 发 挥 作用 ， 当 然 编写 JavaScript 代码 的 方法 也 很 简单 。 


如 15.1.1 ”使 用 <script> 标 签 


在 HIML 页 面 中 舱 入 JavaScript 脚本 需要 使 用 <script> 标 签 ， 用 户 可 以 直接 在 <scrip 亿 标签 中 编写 
，JavaScript 代码 ， 或 者 单独 编写 JavaScript 文件 ， 然 后 通过 <scrip 亿 标签 导入 。 

【示例 1】 直 接 在 页 面 中 嵌入 JavaScript 代码 。 

【操作 步骤 】 
第 1 步 ， 新 建 HIML 文档 ， 保 存 为 testhtml， 然 后 在 <head> 标 签 内 插入 一 个 <scrip 人 标签 。 
第 2 步 ， 为 <script> 标 签 指定 type 属性 值 为 "textjavascript"。 现 代 浏 览 器 默认 <scrip 亿 标签 的 类 型 
”为 JavaScript 脚本 ， 因 此 省 略 type 属性 依然 能 够 被 正确 执行 ， 但 是 考虑 到 代码 的 兼容 性 ， 建 议定 义 该 
属性 。 
| 第 3 步 ， 直 接 在 <scrip 全 标签 内 部 输入 JavaScript 代码 : 
<script type="text/Javascript"> 
function hi(O{ 

document.write("<hl>Hello,World!</h1>"); 


} 
hi0; 
</script> 
| 上 面 JavaScript 脚本 先 定义 了 一 个 hi0 函 数 ， 该 函数 被 调用 后 会 在 页 面 中 显示 字符 “Hello,World!”。 
document 表示 DOM 网 页 文档 对 象 ，document.write0 表 示 调 用 document 对 象 的 write0 方 法 ， 在 当前 
”网 页 源 代码 中 写 入 HTML 字符 串 "<h1>Hello,World!</h1>"。 
调用 hi0 函 数 ， 浏 览 器 将 在 页 面 中 显示 一 级 标题 字符 “Hello,World!”。 
第 4 步 ， 保 存 网 页 文档 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 15.1 所 示 。 
包含 在 <scrip 亿 标签 内 的 JavaScript 代码 被 浏览 器 从 上 至 下 依次 解释 执行 。 
【示例 2】 包含 外 部 JavaScript 文件 。 
【操作 步骤】 
第 1 步 ， 新 建文 本 文件 ， 保 存 为 testjs。 注 意 ， 扩 展 名 为 js， 表 示 该 文本 文件 是 JavaScript 类 型 的 
' 文件 。 


人 富 提示 : 使 用 <scrip 亿 标签 包含 外 部 JavaScript 文件 时 ， 默 认 文件 类 型 为 JavaScript， 因 此 .js 扩展 名 
不 是 必需 的 ， 浏 览 器 不 会 检查 包含 JavaScript 的 文件 的 扩展 名 。 在 高 级 开发 中 ,使 用 JSP、 
PHP 或 其 他 服务 器 端 语言 动态 生成 JavaScript 代码 时 可 以 使 用 任意 扩展 名 ， 如 果 不 使 用 .js 
扩展 名 ， 用 户 应 确保 服务 器 能 返回 正确 的 MIME 类 型 。 


第 2 步 ， 打 开 test.js 文本 文件 ， 在 其 中 编写 下 面 代 码 ， 定 义 简单 的 输出 函数 。 
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function hi(){ 

alert("Hello, World!"): 
} | 
在 上 面 代 码 中 ，alert0 表 示 Window 对 象 的 方法 ， 调 用 该 方法 将 弹出 一 个 提示 对 话 框 ， 显示 参数 
字符 串 “Hello,World! ”。 

第 3 步 ， 保 存 JavaScript 文件 ， 注 意 与 网 页 文件 的 位 置 关 系 。 这 里 保存 JavaScript 文件 的 位 置 与 | Note 
调用 该 文件 的 网 页 文件 位 于 相同 目录 下 。 

第 4 步 ， 新 建 HIML 文档 ， 保 存 为 testl.html。 然 后 在 <head> 标 签 内 插入 一 个 <scrip 亿 标签 。 定 久 
src 属性 ， 设 置 属性 值 为 指向 外 部 JavaScript 文件 的 URL 字符 串 。 代 码 如 下 : 


<script type="text/Javascript" sre="test.Js"></script> | 
第 5 步 ， 在 上 面 <scripP> 标 签 下 一 行 继续 插入 一 个 <script> 标 签 ， 直 接 在 <script> 标 签 内 部 输入 JavaScript ， 
代码 ， 调 用 外 部 JavaScript 文件 中 的 hiO 函 数 。 


<script type="text/Javascript" src="test.]s"></script> 
<script type="text/Javascript"> 

hiO0; // 调 用 外 部 JavaScript 文件 的 函数 
</script> 


第 6 步 ， 保 存 网 页 文档 ， 在 浏览 右 中 预览 ， 则 显示 效果 如 图 15.2 所 示 。 


x 


ee EE ymysite/testl.htm| DO -dc 并 正在 等 待 localhost x 


Xx 


和 Hello,World! 
Hello,World! 


图 15.1 第 一 个 JavaScript 程序 图 15.2 调用 外 部 函数 弹出 提示 对 话 框 ] 


例 提示 : 定义 src 属 ， 性 的 <script> 标 签 不 应 再 包含 JavaScript 代码 。 如 果 诅 入 了 代码 ， 则 只 会 下 载 并 | 
执行 外 部 JavaScript 文件 ， 误 入 代码 会 被 忽略 。src 属性 可 以 包含 外 部 域 的 JavaScript 文件 。 | 
例如 : 
<script type="text/Javascript" src="http://www.sothersite.com/test.]s"></script> 


15.1.2 比较 脚本 样式 与 CSS 样式 


JavaScript 代码 与 CSS 代码 不 会 相互 干扰 ， 但 是 由 于 JavaSeript 可 以 控制 CSS 样式 ， 所 以 它们 之 ， 视频 讲解 
间 仍 然 存在 某 些 关联 。 对 于 CSS 文件 来 说 ， 样 式 所 引用 的 外 部 文件 的 路 径 都 是 以 代码 所 在 位 置 作 为 ， 
参考 来 进行 设置 的 ， 而 JavaScript 恰恰 相反 ， 它 是 以 所 引用 的 网 页 位 置 作为 参考 进行 设置 的 。 

【示例 】 有 一 个 简单 的 站 点 结构 ， 网 页 文件 位 于 根 目录 ， 而 CSS 文件 、JavaScript 文件 和 图 像 文 
件 都 位 于 根 目录 下 images 文件 夹 中 ， 如 图 15.3 所 示 。 
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文件 夹 (images) 网 页 文件 
(index.html) 


CSS 文件 
(css.css) 


图 15.3 一 个 简单 的 站 点 结构 


下 面 分 别 使 用 CSS 样式 和 JavaScript 脚本 样式 为 网 页 中 <div id="box"> 标 签 定 义 背 景 图 像 。 
【操作 步骤 】 

第 1 步 ， 新 建 样式 表 文 件 ， 保 存 为 css.css， 存 放 于 images 文件 夹 中 。 

第 2 步 ， 在 CSS 样式 表 文 件 〈css.css) 中 定义 方法 如 下 : 


#box { 
background:url(css.g1f); 
} 
CSS 文件 与 背景 图 像 文件 都 在 同一 目录 (images 文件 夹 ) 下 ， 所 以 可 以 直接 引用 ， 而 不 用 考虑 网 


页 文件 的 位 置 。 


第 3 步 ， 新 建 JavaScript 文本 ， 保 存 为 jsjs， 存 放 于 images 文件 夹 中 。 
第 4 步 ， 在 js.js 文件 中 输入 下 面 代码 ， 使 用 JavaScript 脚本 定义 <div id="box"> 的 背景 图 像 。 
window.onload = functionO{ 
document.getElementById("box").style.backgroundImage="url(1mages/ js.g1f)"; 
} 
从 上 面 代 码 可 以 看 到 ，JavaScript 文件 所 引用 的 背景 图 像 路 径 是 以 网 页 文件 的 位 置 为 参考 来 进行 


| 设置 的 ， 而 不 用 考虑 JavaScript 文件 的 具体 位 置 ， 如 条 网 页 文件 不 动 ， 则 JavaScript 文件 所 引用 的 路 
， 径 是 不 会 变化 的 。 


第 6 步 ， 在 网 页 文件 中 同时 引用 CSS 和 JavaScript 文件 。 


<style type="text/css"> 
#box { 
width:440px; 
height:312px; 
} 
</style> 
<script type="text/Javascript" src="i1mages/]s.Jjs"></script> 
<link href~="i1mages/css.css" rel="stylesheet" type="text/css"> 


<div 1d="box"></div> 
。 400 
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第 7 步 ， 保 存 网 页 文档 ， 在 浏览 器 中 预览 ， 会 发 现 <div id="box"> 标 签 显示 JavaScript 脚本 定义 的 
背景 图 像 效 果 ， 如 图 15.4 所 示 。 | 


委 - 一 中 -| 悟 http://localho... ~ 妇 


~ Tw 


图 15.4 js.gif 优 先 显示 

总 之 ，JavaScript 文件 与 CSS 文件 中 代码 在 引用 外 部 图 像 文 件 时 ， 相 对 路 径 设置 是 不 同 的 ， 具 体 

区 别 如 下 。 
CSS 文件 : 考虑 CSS 文件 与 导入 的 外 部 图 像 文件 的 位 置 关系 。 

JavaScript 文件 : 考虑 网 页 文件 与 导入 的 外 部 图 像 文件 的 位 置 关系 。 

另外 ， 当 同时 使 用 CSS 和 JavaScript 为 页 面 对 象 定义 样式 时 ，JavaScript 脚本 样式 的 优先 级 要 高 ， 

于 CSS 样式 的 优先 级 。 | 


15.2 获取 网 页 对 象 


使 用 JavaScript 控制 CSS 样式 的 第 一 步 是 获取 网 页 对 象 ， 以 实现 对 其 进行 控制 。 | 
15.2.1 获取 元 素 生 


为 了 获取 文档 结构 中 的 元 素 节 点 ，DOM 提供 了 两 个 方法 。 

1. 使 用 getElementById0 方 法 

使 用 getElementById() 方 法 可 以 精确 获取 指定 元 素 的 引用 指针 。 有 具体 用 法 如 下 : 
o = document.getElementById(ID) 

其 中 o 表示 指定 元 素 的 引用 指针 ， 参 数 ID 表示 文档 结构 中 对 应 元 素 的 id 属性 值 。 如 果 文 档 中 不 | 


存在 指定 元 素 ， 则 返回 值 为 null。 该 方法 只 适用 于 document 对 象 。 
【示例 1】 下 面 脚本 能 够 获取 对 <div id="box"> 对 象 的 控制 权 。 
<div id="box"> 盒 子 </div> 
<script> 
var box = document.getElementById("box");”// 获 取 id 属性 值 为 box 的 指定 元 素 的 引用 指针 
</script> 
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| getElementById0 方 法 返回 指定 元 素 的 对 象 ， 这 个 对 象 包含 nodeName、nodeType 等 属性 ， 简 单 说 
， 明 如 下 。 
nodeName 表示 节点 的 名 称 。 如 果 是 元 素 节 点 ， 则 nodeName 返回 值 为 标签 名 称 ， 标 签名 称 


永远 是 大 写 ; 如 果 是 属性 节点 ， 则 nodeName 返回 值 为 属性 的 名 称 ; 如 果 是 文本 节点 ， 则 
nodeName 返回 值 永 远 是 #text 标 识 符 ; 如 果 是 文档 节点 , 则 nodeName 返回 值 永 远 是 #document 
标识 符 。 


四。 nodeType 表示 节点 的 类 型 。 该 属性 的 返回 值 比 较 多 ， 第 用 节点 类 型 : 1 表示 元 素 类 型 ，2 表 


示 属 性 ，3 表示 文本 ，8 表示 注释 ，9 表示 文档 。 
【示例 2】 在 下 面 示 例 中 ， 使 用 getElementById0 方 法 获取 <div id="box"> 对 象 的 引用 指针 ， 然 后 


”利用 nodeName、nodeType 属性 查看 该 对 象 的 节点 名 称 和 节点 类 型 。 
| <div id="box"> 盒 子 </div> 


<script> 

var box = document.getElementById("box"); // 获 取 指 定 盒子 的 引用 指针 
var info = "nodeName: "+ boxnodeName: // 获 取 该 节点 的 名 称 

info += "\modeType: "+ box.nodeType: /获取 该 节点 的 类 型 
alert(info): /显示 提示 信息 

</script> 


2. 使 用 getElementByTagName() 方 法 
使 用 getElementByTagName0 方 法 获取 指定 标签 名 称 的 所 有 元 素 对 象 。 其 用 法 如 下 : 
a= document.getElementsByTagName(tagName) 


其 中 参数 tagName 表示 指定 名 称 的 标签 , 该 方法 返回 值 为 一 个 元 素 集合 。 使 用 length 属性 可 以 获 
， 取 集合 中 包含 元 素 的 个 数 ， 利 用 数组 下 标 可 以 确定 其 中 某 个 元 素 对 象 。 


【示例 3】 对 于 DOM 元 素 集合 来 说 ， 由 于 它们 都 是 节点 对 象 ， 因 此 可 以 使 用 nodeName、nodeType 


属性 查看 该 对 象 的 节点 名 称 和 节点 类 型 。 


<p id="p1"> 段 落 文本 1</p> 
<p id="p2"> 段 落 文本 2</p> 
<p id="p3"> 段 落 文 本 3</p> 


<script> 

Var p = document.getElementsByTagName("p"); /获取 文档 中 所 有 p 元 素 
alert(p[2].nodeName): // 显 示 第 3 个 p 元 素 对 象 的 节点 名 称 
</script> 


在 实际 开发 中 ， 常 用 for 循环 过 有 历 集 合 中 所 有 元 素 。 


【示例 4】 下 面 的 代码 使 用 for 结构 遍历 获得 的 所 有 p 元 素 ， 并 设置 p 元 素 的 class 属性 为 red。 


<p id="p1"> 段 落 文本 1</p> 
<p id="p2"> 段 落 文 本 2</p> 
<p id="p3"> 段 落 文 本 3</p> 


<script> 

var p = document.getElementsByTagName("p"); /获取 文档 中 所 有 p 元 素 

for(var i=0:i<p.length:i++){ // 遍 历 p 数据 集合 
plil.setAttribute("class","red"): // 为 每 个 p 元 素 添加 class 类 


</script> 
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会 提示 : 使 用 document getElementsByTagName("*") 方 式 获取 文档 中 所 有 元 素 节点 的 方法 很 少 用 ， 


同时 IE 6.0 及 其 以 下 版 本 浏览 器 对 其 支持 不 是 很 好 。 对 于 IE 浏览 器 来 说 ， 可 以 通过 ， 


document.all 来 获取 文档 中 所 有 元 素 节 点 。 
15.2.2 ”使 用 CSS 选择 器 匹配 元 素 


HTMLS5 引入 了 与 jQuery 选择 器 相似 的 DOM API 模块 , 该 模块 中 的 querySelector0 和 querySelectorAll0 
方法 能 够 根据 CSS 选择 嚣 规范， 便捷 定位 文档 中 指定 元 素 。 目 前 主流 浏览 器 ， 包 括 IE8+、Firefox、 
Chrome、Safari、Opera 均 文 持 它们 。 


querySelector0 和 querySelectorAll0 方 法 的 参数 必须 是 符合 CSS 选择 器 规范 的 字符 串 ， 不 同 的 是 


querySelector0) 方 法 返回 的 是 一 个 元 素 对 象 ，querySelectorAll0 方 法 返回 的 是 一 个 元 素 集 合 。 
【示例 1】 新 建 网 页 文档 ， 输 入 下 面 的 HTML 结构 代码 。 
<div class="content"> 
<ul> 
<]i> 首 页 < 小 > 
<l]i class="red"> 财 经 </li> 
<]i class="blue"> 娱 乐 </li> 
<]i class="red"> 时 尚 </li> 
<l]i class="blue"> 互 联网 </li> 
</ul> 
</div> 


如 果 要 获得 第 一 个 上 元素， 可 以 使 用 如 下 方法 : 
document.querySelector(".content ul 11"); 

如 果 要 获得 所 有 元素， 可 以 使 用 如 下 方法 : 
document.querySelectorAll(".content ul 11"); 

如 果 要 获得 所 有 class 为 red 的 开元 素 ， 可 以 使 用 如 下 方法 : 
document.querySelectorAll("li.red"); 


窑 提示 : DOM API 模块 也 包含 getElementsByClassName( 方 法 ， 使 用 该 方法 可 以 获取 指定 类 名 的 元 


素 。 例 如 : 
document.getElementsByClassName("red"); 


< 外 注意 : getElementsByClassName() 方 法 只 能 够 接收 字符 囊 ， 且 为 类 名 ， 而 不 需要 加 点 号 前 级 ， 如 


果 没 有 匹配 到 任何 元 素 则 返回 空 数组 。 


CSS 选择 器 是 一 个 便捷 的 确定 元 素 的 方法 ， 这 是 因为 大 家 已 经 对 CSS 很 熟悉 了 。 当 需要 


联合 查询 时 ， 使 用 querySelectorAl10 更 加 便利 。 


【示例 2】 在 文档 中 ， 一 些 1i 元 素 的 class 名 称 是 red， 另 一 些 元 素 的 class 名 称 是 blue， 可 以 用 


querySelectorAl10 方 法 一 次 性 获得 这 两 类 节点 。 
var lis = document.querySelectorAll("li.red, li.blue"); 


如 末 不 使 用 querySelectorAl10 方 法 ， 那 么 要 获得 同样 列表 ， 需 要 更 多 工作 。 一 个 办 法 是 选择 所 有 | 
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”的 元 素 ， 然 后 通过 迭代 操作 过 滤 出 不 需要 的 列表 项 目 。 


var result = [], lisl = document.getElementsByTagName('l1"), classname = "; 
for(var 1= 0, len = lisl.length; 1< len; 1++) { 

classname = lisl[il.className.; 

if(classname —= 'red' || classname 一 一 blue) { 


| result.push(lis1[i]): 
| 


} 


比较 上 面 两 种 不 同 的 用 法 ， 使 用 选择 器 querySelectorAll0 方 法 比 使 用 getElementsByTagName() 要 
， 快 很 多 。 因 此 ， 如 果 浏 览 器 支持 document.querySelectorAl110， 那 么 最 好 使 用 它 。 


15.3 ”操作 类 样式 


使 用 JavaScript 控制 CSS 样式 最 简单 、 最 直接 的 方法 是 为 元 素 添加 或 删除 类 样式 。 


15.3.1 获取 类 样式 


| DOM 定义 getAttribute() 方 法 可 以 获取 指定 元 素 的 属性 。 其 用 法 比较 简单 ， 只 要 指定 元 素 及 它 的 
”属性 ， 即 可 快速 反馈 该 元 素 所 对 应 的 属性 值 。 
【示例 1】 下 面 示例 能 够 获取 红色 盒子 和 蓝 色 盒子 ， 并 显示 这 些 元 素 所 包含 的 class 属性 值 。 


<script> 

window.onload = function() { 
var red = document.getElementById("red"); /获取 红色 盒子 
alert(red.getAttribute("class")): /显示 红色 盒子 的 class 属性 值 
var blue = document.getElementById("blue"): /获取 蓝 色 盒 子 
alert(blue.getAttribute("class")); /显示 蓝 色 盒 子 的 class 属性 值 

} 

</script> 


<div id="red" class='"red"> 红 盒子 </div> 
<div id="blue" class="blue"> 蓝 盒子 </div 


所 传递 的 参数 是 一 个 字符 串 形 式 的 元 素 属性 名 称 ,， 返回 的 是 一 个 字符 串 类 型 的 值 ,， 如 果 给 定 属性 
不 存在 ， 则 返回 的 值 为 null。 
【示例 2】 除 了 标准 读 取 属性 的 方法 外 ，HTML DOM 模型 还 支持 快捷 读 取 属 性 的 方法 。 
window.onload = function() { 
var red = document.getElementByld("red");: 
alert(Ted.1d): 
var blue = document.getElementById("blue”); 
alert(blue.1d); 
} 


| 对 于 class 属性 ， 必 须 使 用 className 属性 来 读 取 ， 因 为 class 是 JavaScript 保留 字 。 同 样 ， 要 读 
， 取 for 属性, 则 必须 使 用 htmlFor 属性 名 , 这 与 CSS 脚本 中 float 和 text 属性 被 改名 为 cssFloat 和 cssText 


”原因 相同 。 
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【示例 3】 使 用 className 读 取 类 样式 。 


<script> 
window.onload = function() { 
var red = document.getElementById("red"); // 获 取 红 色 盒 子 | 7 
alert(red.className): /显示 红色 盒子 的 class 属性 值 淄 确 
var blue = document.getElementById("blue"); /获取 蓝 色 盒 子 
alert(blue.className): /显示 蓝 色 盒 子 的 class 属性 值 
} 
</script> 


<div id="red" class="red"> 红 盒子 </div> 
<div id='"blue" class="blue"> 蓝 盒子 </div 


【示例 4】 对 于 复合 类 样式 ， 需 要 使 用 split0 方 法 臂 开 返回 字符 串 ， 然 后 过 历 读 取 类 样式 。 


<script> 
window.onload = function() { 
/所 有 类 名 生成 的 数组 
var classNameArray = document.getElementByld("red").className.split(" "); 
for(var i in classNameArray ){ /遍历 数组 
alert(classNameArray[i]): // 当 前 class 名 
} 
} 
</script> 


<div id="red" class="red blue"> 红 盒子 </div> 


15.3.2 添加 类 样式 
为 元 素 设置 属性 可 以 使 用 setAttribute0 方 法 实现 ， 用 法 如 下 : 


e.setAttribute(name,value) 


其 中 参数 。 表示 指定 的 元 素 对 象 ， 参 数 name 和 value 分 别 表示 属性 名 称 和 属性 值 。 属 性 名 和 属 

性 值 必 须 以 字符 串 的 形式 进行 传递 。 如 果 元 素 中 存在 指定 的 属性 ， 它 的 值 将 被 刷新 ; 如 果 不 存 在 , 则 ， 
setAttribute() 方 法 将 为 元 素 创建 该 属性 并 赋值 。 
【示例 1】 下 面 示例 分 别 为 页 面 中 div 元 素 设置 class 属性 。 


<script> 

window.onload = function() { 
var red = document.getElementBylId("red"); 
var blue = document.getElementById("blue"); 
red.setAttribute("class", "red");: 
blue.setAttribute("class", "blue"): 


</script> 
<div id='"red"> 红 盒子 </div> 
<div id="blue"> 蓝 盒子 </div> 


【示例 2】 使 用 setAttribute0 方 法 存在 刺 问 ， 一 般 通过 className 设置 元 素 的 类 名 。 


<script> 
window.onload = function() { 
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var red = document.getElementById("red"); 
var blue = document.getElementById("blue"); 
Ted.className = "red"; 
blue.className = "blue"; 

} 

</script> 

<div id="red"> 红 盒子 </div> 

<div id="blue"> 蓝 盒子 </div> 


【示例 3】 和 直接 使 用 className 添加 类 样式 ， 会 覆 兰 元 素 原 来 的 类 样式 。 可 以 采用 县 加 的 方式 添 


”加 类 。 


<script> 

window.onload = function() { 
var red = document.getElementByld("red");: 
Ted.className = "red"; 
red.className += " blue": 

} 

</script> 

<div id="red"> 红 盒子 </div> 


【示例 4】 使 用 蕉 加 的 方式 添加 类 也 存在 问题 ， 即 容易 添加 大 量 重 复 的 类 。 为 此 ， 定 义 一 个 检测 


”函数 ， 判 断 元 素 是 否 包含 指定 的 类 ， 然 后 决定 是 否 添加 类 。 


<script> 
function hasClass(element,className){ // 类 名 检测 函数 
var Teg =new RegExp('(\s|’)'+ className + '(\s|$)"); 
retum reg.test(element.className): // 使 用 正则 表达 式 检测 是 否 有 相同 的 样式 
} 
function addClass(element,className){ // 添 加 类 名 函数 


1f(!hasClass(element, className)) 
element.className +=' ' + className: 
} 
window.onload = function() { 
var red = document.getElementByld("red"); 


addClass(red,'red'): 
addClass(red,'blue"): 
} 
</script> 


<div id="red"> 红 盒子 </div> 


汪汪 ”15.3.3 删除 类 样式 
Tt 


DOM 使 用 removeAttribute(0) 方 法 删除 指定 的 属性 ， 用 法 如 下 : 
e.removeAttribute(name) 


其 中 e 表示 一 个 元 素 对 象 ， 而 参数 name 表示 元 素 的 属性 名 。 
【示例 1】 下 面 示例 演示 如 何 动 态 设置 表格 的 边框 。 


<script> 


window.onload = function( {/ 绑 定 页 面 加 载 完 毕 时 的 事件 处 理 函 数 
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var table = document.getElementsByTagName("table")[0]: // 获 取 表 格外 框 的 引用 指针 


var del = document.getElementById("del"): /获取 “删除 ”按钮 的 引用 指针 
var reset = document.getElementById("reset"): // 获 取 “ 恢 复 ” 按 钮 的 引用 指针 
del.onclick = functionO{ /为 “删除 ”按钮 绑 定 事 件 处 理 函 数 
table removeAttribute("border'): // 移 除 边框 属性 
reset.onclick = functionO{ /为 “恢复 ”按钮 绑 定 事件 处 理 函 数 
table.setAttribute("border", "2"): /设置 表格 的 边框 属性 
} 
} 
</script> 
<table width="100%" border="2"> 
<tr> 
<td> 数 据 表 格 </td> 
</tr> 
</table> 


<button id='"del"> 删 除 <button><button id="reset" 人 > 恢复 </button> 


在 上 面 示例 中 ,设计 了 两 个 按钮 ， 并 分 别 绑 定 不 同 的 事件 处 理 函 数 。 单 击 “ 删 除 ” 按 钮 即 可 调用 


表格 的 removeAttribute0) 方 法 清除 表格 边框 ， 单 击 “ 恢 复 ” 按 钮 即 可 调用 表格 的 setAttribute(0) 方 法 重 
新 设置 表格 边框 的 粗细 。 
【示例 2】〗】 下 面 示 例 演示 如 何 目 定义 删除 类 函数 ， 并 调用 该 函数 删除 指定 类 名 。 
<script type="text/Javascript"> 
function hasClass(element,className){// 类 名 检测 函数 
var reg =new RegExp('(\s|^)'+ className + '"(\s|®$)"); 
return reg.test(element.className); // 使 用 正则 表达 式 检 测 是 否 有 相同 的 样式 
}function deleteClass(element,className){ 
f(hasClass(element,className)){ 


element.className.replace(reg,' ); // 利 用 正则 表达 式 捕 获 要 删除 的 样式 的 名 称 , 然后 把 它 蔡 换 成 一 个 


空白 字符 串 ， 就 相当 于 删除 了 
} 


} 
window.onload = function() { 


var red = document.getElementById("red"); 
deleteClass(red,'blue"); 

} 

</script> 

<div id="red" class="red blue bold"> 红 盒子 </div> 


上 面 的 代码 使 用 正则 表达 式 检 测 className 属性 值 字 符 串 中 是 售 包 含 指定 的 类 名 ， 如 条 存 在 , 则 ， 


使 用 空 字 符 奉 换 匹 配 到 的 子 字符 串 ， 从 而 实现 删除 类 名 的 目的 。 
15.4 操作 CSS 样式 


在 JavaScript 脚本 中 获取 页 面 元 素 之 后 ， 就 可 以 使 用 style 属性 获取 该 元 素 的 CSS2Properties 对 象 。 
CSS2Properties 包含 该 对 象 的 所 有 CSS 脚本 属性 。 设 置 这 些 属性 与 设置 CSS 样式 的 效果 是 一 样 的 。 
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生生 15.4.1 ”使 用 style 对 象 
| DOM 定义 每 个 元 素 都 继承 一 个 style 对 象 ，style 对 象 包含 一 些 方法 ， 利 用 这 些 方法 可 以 与 CSS 
于 样式 实现 交互 。 但 是 ，style 对 象 针对 的 是 行内 样式 ， 不 支持 操作 样式 表 ， 包 括 内 部 样式 表 (<style> 
标签 包含 的 样式 ) 或 外 部 样式 表 。 
。 
1. getPropertyValue() 方 法 
getPropertyValue(0 方 法 能 够 获取 指定 元 素 样式 属性 的 值 。 具 体 用 法 如 下 : 
var value = e.style.getPropertyValue(propertyName) 
参数 propertyName 表示 CSS 属性 名 ， 不 是 CSS 脚本 属性 名 ， 对 于 复合 名 应 该 使 用 连 字 符 进 行 连 接 。 
【示例 1】 下 面 代码 使 用 getPropertyValue() 方 法 获取 行内 样式 中 width 属性 值 ， 然 后 输出 到 盒子 
内 显示 ， 如 图 15.5 所 示 。 


<script> 

window.onload = function(O){ 
var box = document.getElementBylId("box"); // 获 取 <div id="box"> 
var width = box.style.getPropertyValue("width"); 。“”// 读 取 div 元 素 的 width 属性 值 
box.innerHTML = "盒子 宽度 : "+ width; // 输 出 显示 width 值 

} 

</script> 


<div id="box" style="width:300px: height:200px:border:solid 1px red" > 盒子 </div> 


Xx 


a = Ea http;//localhost/m 只 - | EE localhost KX 


合子 宫 度 : 300px 


图 15.5 使 用 getPropertyValue0 读 取 行 内 样式 


| 早期 正版 本 不 支持 getPropertyValue() 方 法 ， 但 是 可 以 通过 style 对 象 直接 访问 样式 属性 来 获取 指 

， 定 样式 的 属性 值 。 

”从 提示 : 在 设置 CSS 脚本 属性 时 ， 应 注意 几 个 问题 : 

加 ”由 于 float 是 JavaScript 保 留 字 ， 禁 止 用 户 使 用 ， 因 此 ，CSS2Properties 内 没有 与 float 
属性 对 应 的 名 称 . 为 了 解决 这 个 问题 , CSS2Properties 在 float 属性 前 增加 了 css 前 级 ， 
使 用 cssFloat 名 来 表示 脚本 中 float 属性 。 

回 在 CSS 中 读 写 属 性 值 时 , 不 需要 考虑 值 的 类 型 . 但 是 在 JavaScript 中 ，CSS2Properties 
对 象 认定 所 有 CSS 属性 值 都 是 字符 串 ， 因 此 脚本 中 所 有 属性 值 都 必须 加 上 引号 ， 以 
表示 为 字符 串 数 据 类 型 。 例 如 : 
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elementNode.style.fontFamlly = "Arial, Helvetica, sans-serlf ': 

elementNode.style.cssFloat = "left": 

elementNode.style.color = "#{f0000"; 

回 在 CSS 样式 中 声明 尾部 的 分 号 不 能 够 作为 属性 值 的 一 部 分 被 引用 ， 脚 本 中 的 分 号 只 
是 JavaScript 语法 规则 的 一 部 分 ， 而 不 是 CSS 声明 中 分 号 的 引用 。 

回 声明 中 属性 值 所 包含 的 单位 等 都 必须 作为 值 的 一 部 分 , 完整 地 传递 给 CSS 脚本 属性 ， 
省 略 单位 则 所 设置 的 脚本 样式 无 效 。 例 如 : 

elementNode.style.width = "100px"; 


回 在 脚本 中 可 以 动态 设置 属性 值 , 但 最 终 赋值 给 属性 的 值 应 是 一 个 字符 串 ， 且 必须 包含 


单位 。 例 如 : 
elementNode.style.top = top + "px"; 
elementNode.style.right = right + "px"; 
elementNode.style.bottom = bottom + "px"; 
elementNode.style.left = left + "px"; 


【示例 2】 针对 示例 1 代码 ， 可 以 使 用 如 下 方式 读 取 width 属性 值 。 
<script> 
window.onload = function(O{ 
var box = document.getElementById("box"); 
var width = box.style.width:; 
box.innerHTML = "盒子 宽度 : "+ width:; 
} 
</script> 


2. setProperty0 方 法 
setProperty0 方 法 可 以 为 指定 元 素 设 置 样式 。 具 体 用 法 如 下 : 
e.style.setProperty(propertyName, value, priority) 
参数 说 明 如 下 。 
加 ”propertyName: 设置 CSS 属性 名 。 
四 value: 设置 CSS 属性 值 ， 包 含 属性 值 的 单位 。 
思 ”priority: 表示 是 否 设 置 !important 优先 级 命令 ， 如 果 不 设置 可 以 以 空 字符 串 表 示 。 
【示例 3】 在 下 面 示例 中 ， 使 用 setProperty0 方 法 定义 盒子 的 显示 宽度 和 高 度 分 别 为 400px 和 200px。 


<script> 

window.onload = function(){ 
var box = document.getElementById("box"); // 获 取 <div id="box"> 
box.style.setProperty("width","400px",""): /定义 盒子 宽度 为 400px 
box.style.setProperty("height","200px",""); // 定 义 盒子 高 度 为 200px 

} 

</script> 


<div id="box" style="border:solid 1px red" > 盒子 </div> 
如 果 要 兼容 早期 正 浏览 器 ， 则 可 以 使 用 如 下 方式 设置 。 
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<script> 
window.onload = functionO{ 
var box = document.getElementById("box"); 
box.style.width = "400px"; 
box.style.height = "200px"; 
} 
</script> 
3. removeProperty0 方 法 
removeProperty() 方 法 可 以 移 除 指定 CSS 属性 的 样式 声明 。 具 体 用 法 如 下 : 


e.style. removeProperty(propertyName) 

4. item( 方 法 

item() 方 法 返回 style 对 象 中 指定 索引 位 置 的 CSS 属性 名 称 。 上 有 具体 用 法 如 下 : 

var name = e.style.1tem(index) 

参数 index 表示 CSS 样式 的 索引 号 。 

5. getPropertyPriority() 方 法 

getPropertyPriority0 方 法 可 以 获取 指定 CSS 属性 中 是 否 附 加 了 limportant 优先 级 命令 , 如 果 存 在 则 


”返回 important 字符 串 ， 否 则 返回 空 字符 串 。 


【示例 4 在 下 面 示例 中 ， 定 义 鼠 标 移 过 盒子 时 ， 盒 子 的 背景 色 为 蓝 色 ， 而 边框 颜色 为 红色 ， 当 


移出 盒子 时 ， 又 恢复 到 盒子 默认 设置 的 样式 ;而 单 击 盒子 时 ， 则 在 盒子 内 输出 动态 信息 ， 显 示 当 前 例 
， 子 的 宽度 和 高 度 ， 演 示 效 果 如 图 15.6 所 示 。 


<script> 

window.onload = function() { 
var box = document.getElementById("box"): // 获 取 盒 子 的 引用 
box.onmouseover = function(){ /定义 鼠标 经 过 时 的 事件 处 理 函 数 


box.style.setProperty("background-color", "blue", ""); /设置 背景 色 为 蓝 色 
box.style.setProperty("border", "solid S0px red", ""); // 设 置 边框 为 50px 的 红色 实 线 


. 
box.onclick = functionO{ /定义 鼠标 单 击 时 的 事件 处 理 函 数 
box .InnerHTML = (box.style.ltem(0) + ":" + box.style.getPropertyValue("width")); 
/显示 盒子 的 宽度 
box .InnerHIML = box .innerHIML + "<br>"+ (box.style.item(1) + ":" + box.style.getPropertyValue 
("height")); /显示 盒子 的 高 度 
} 
box.onmouseout = function(O { // 定 义 鼠 标 移出 时 的 事件 处 理 函 数 
box.style.setProperty("background-color", "red", ""); // 设 置 背 景色 为 红色 
box.style.setProperty("border", "solid 50px blue", ""); // 设 置 边框 为 50px 的 蓝 色 实 线 
} 
} 
</script> 


<div 1d="box" style="wldth:100px: height: 100px; background-color:red:; border:solid S0px blue;"></div> 
【示例 5】 针 对 示例 4， 下 面 使 用 一 种 快捷 方式 设计 相同 的 交互 效果 ， 这 样 能 够 兼容 正 早期 版 本 ， 
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页 面 代码 如 下 : 
<script> 
window.onload = function(){ 
var box = document.getElementById("box"): // 获 取 盒 子 的 引用 
box.onmouseover = function(){ 
box.style.backgroundColor = "blue"; /设置 背景 样式 
box.style.border = "solid SO0px red"': /设置 边框 样式 
} 
box.onclick = functionO { // 读 取 并 输出 行内 样式 


box .InnerHTML = "width:" + box.style.width:; 
box .InnerHTML = box .innerHIML+ "<br>"+ "height:" + box.style.helght: 


} 
box.onmouseout = function(O) { // 设 计 鼠 标 移出 之 后 ， 恢 复 默 认 样 式 
box.style.backgroundColor = "red"; 
box.style.border = "solid SOpx blue": 
} 
} 
</script> 


<div 1d="box" style="width:100px; height: 100px; background-color:red: border:solid SO0px blue:;"></div> 


ee 一 Ke http://localhost/m 万 ~ BoE 


默认 显示 效果 鼠标 经 过 效果 女 标 单 击 效 果 
图 15.6 设计 动态 交互 样式 效果 
【拓展 】 
韭 正 浏 贤 器 也 文 持 style 快捷 访问 方式 ， 但 是 它 无 法 获取 style 对 象 中 指定 序号 位 置 的 属性 名 称 ， 
此 时 可 以 使 用 cssText 属性 读 取 全 部 style 属性 值 ， 再 借助 JavaScript 方法 把 返回 字符 串 臂 开 为 数组 。 


【示例 6】 在 下 面 示例 中 ， 使 用 cssText 读 取 全 部 行内 样式 字符 串 ， 然 后 使 用 String 的 split0 方 法 
把 字符 串 臂 开 为 数组 ， 使 用 for in 语句 过 历数 组 ， 逐 一 读 取 每 个 样式 ， 再 使 用 split0 方 法 臂 开 属性 和 


属性 名 ， 最 后 格式 化 输出 显示 ， 演 示 效 果 如 图 15.7 所 示 。 


<script> 
window.onload = function() { 
var box = document.getElementById("box"); /获取 盒子 的 引用 
var str = box.style.cssText: // 读 取 盒 子 全 部 行内 样式 
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已 


var a = str.split(":"); // 把 行内 样式 字符 串 转 换 为 数组 

Var temp=""; 

| for(var b in a){ /遍历 行内 样式 

var prop = a[b].split(":"): /把 每 个 样式 字符 串 劈 开 为 数组 
ifprop[0]) /如 果 存 在 属性 ， 则 输出 显示 


temp +=b+" : 1 十 prop[0]+" =" + prop[1] + "<br>"; 
} 
-MOte box.innerHTML = "box.style.cssText = " + str; 
box.innerHTML = box.innerHTML + "<br><br>" + temp; /把 格式 化 后 的 行内 样式 输出 显示 
} 
| </script> 


<div 1d="box" style="width:600px: height:200px:; background-color:#81F9AS:; border:solld 2px blue:paddimg: 
10px"></div> 


Xx 


3 Ehttp://localhost/mysite/test6.html PDP- 从 se: 


| 15.7 使 用 cssText 属性 获取 行内 样式 


使 用 getAttribute0 方 法 也 可 以 获取 style 属性 值 , 不 过 该 方法 返回 值 保 留 style 属性 值 的 原始 模样 ， 
| 而 cssText 属性 返回 值 可 能 经 过 浏览 器 处 理 ， 且 不 同 浏览 器 返回 值 格式 略 有 不 同 。 
【示例 7】 修 改 示例 6 的 代码 ， 使 用 getAttribute0 方 法 获取 行内 样式 字符 串 信息 。 


| <script> 
window.onload = functionO{ 
var box = document.getElementById("box"); 
| Var str = box.getAttribute("style"); 
var a = str.split(";"); 
var temp=": 
for(var b Im a){ 
var prop = a[b].split(":"); 
1f(prop[0]) 
temp+=b+" : "+prop[O] +"="+prop[l] + "<br>"; 
} 
box.innerHTML = "box.style.cssText = " + str; 
box.InnerHIML = box.InnerHTITML + "<br><br>" + temp: 
} 
] </script> 


<div 1d="box" style="wldth:600px: height:200px:; background-color:#81F9AS: border:solid 2px blue:paddimg: 
10px"></div> 
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15.4.2 ”使 用 styleSheets 对 象 


document 对 象 包含 一 个 styleSheets 属性 集合 ， 它 保存 了 文档 中 所 有 的 样式 表 ， 包 括 内 部 样式 表 ， 7 
和 外 部 样式 表 。 全 、 

styleSheets 为 每 个 样式 表 定 义 了 一 个 cssRules 对 象 ， 用 来 包含 指定 样式 表 中 所 有 的 规则 (样式 )。 
但 是 正 不 文 持 cssRules 对 象 ， 而 预定 义 了 rules 对 象 表示 样式 表 中 的 规则 。 

为 了 兼容 主流 浏览 器 ， 在 使 用 前 应 该 检测 用 户 所 使 用 浏览 器 的 类 型 ， 以 便 调用 不 同 的 对 象 : 

var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rmules:; 


在 上 面 代码 中 , 先 判断 浏览 器 是 否 支持 cssRules 对 象 , 如 果 支 持 则 使 用 cssRules ( 非 正 浏览 器 )， 
否则 使 用 mles (IE 浏览 器 )。 | 
【示例 】 在 下 面 示例 中 ， 通 过 <style> 标 签 定义 一 个 内 部 样式 表 ， 为 页 面 中 的 <div id=-"box"> 标 签 
定义 4 个 属性 : 宽度 、 高 度 、 背 景色 和 边框 。 然 后 在 脚本 中 使 用 styleSheets 访问 这 个 内 部 样式 表 , 把 ， 
样式 表 中 的 第 一 个 样式 的 所 有 规则 读 取出 来 ， 在 盒子 中 输出 显示 ， 如 图 15.8 所 示 。 


<style type="text/css"> 


#box { 
width: 400px: 
height: 200px:; 
background-color:#BFFBS8F:; 
border: solid 1px blue; 

} 

</style> 

<script> 


window.onload = function(){ 
var box = document.getElementById("box"): 
Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;// 判 断 浏览 器 类 型 
box.innerHTML = "<h3> 人 盒子 样式 <h3>" 
box.innerHTML += "<br> 边 框 : "+ cssRules[0].style.border: // 读 取 cssRules 的 border 属性 
box.innerHTML += "<br> 背 景 : " + cssRules[0].style.backeroundColor; 。// 读 取 cssRules 的 background- 
color 属性 


box.innerHTML += "<br> 高 度 : "十 cssRules[0].style.height: // 读 取 cssRules 的 height 属性 
box.innerHTML += "<br> 宽 度 : "十 cssRules[0].style.width:; // 读 取 cssRules 的 width 属性 
} 
</script> 


<div 1d="box"></div> | 

会 提示 : cssRules (或 rules ) 的 style 对 象 在 访问 CSS 属性 时 ， 使 用 的 是 CSS 脚本 属性 名 ， 因 此 所 
有 属性 名 称 中 不 能 使 用 连 字 符 。 例 如 : ] 
cssRules[0l].style.backgroundColor:; 

这 与 行内 样式 中 的 style 对 象 的 setProperty0 方 法 不 同 , setProperty() 方 法 使 用 的 是 CSS 属性 

名 。 例 如 : | 
box.style.setProperty("background-color", "blue", ""); 
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图 15.8 ”使 用 styleSheets 访问 内 部 样式 表 


15.4.3 ”访问 样式 


styleSheets 包含 文档 中 所 有 样式 表 ， 用 户 可 以 通过 下 标 访 问 每 个 样式 表 ， 每 个 数组 元 素 代表 一 个 
， 样式 表 , 数组 的 索引 位 置 是 由 样式 表 在 文档 中 的 位 置 决 定 的 。 每 个 <style> 标 签 包 含 的 所 有 样式 表示 一 
”个 内 部 样式 表 ， 每 个 独立 的 CSS 文件 表示 一 个 外 部 样式 表 。 
【示例 】 下 面 示例 演示 如 何 准 确 找 到 指定 样式 表 中 的 样式 属性 。 
【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 CSS 文件 ， 保 存 为 stylel.css， 存 放 在 根 目录 下 。 
第 2 步 ， 在 stylel.css 中 输入 下 面 样式 代码 ， 定 义 一 个 外 部 样式 表 。 
(@charset "utft-8": 
body {colorblack:} 
p {color:gray;} 
] div {color:white;} 
第 3 步 ， 新 建 HTML 文档 ， 命 名 为 testhtml， 保 存在 根 目录 下 。 
第 4 步 ， 使 用 <style> 标 签 定 义 一 个 内 部 样式 表 ， 设 计 如 下 样式 。 
<style type="text/css"> 
#box {color:green;} 
-Ted {color:red;} 
.blue {color:blue;} 
</style> 


第 5 步 ， 使 用 <link> 标 签 导入 外 部 样式 表 文 件 stylel.css。 

<link hre 伟 "stylel.css" rel="stylesheet" type="text/css" media="all" /> 

第 6 步 ， 在 文档 中 插入 一 个 <div id="box"> 标 签 。 

<div 1d="box"></div> 
| 第 7 步 , 使 用 <scrip 信 标签 在 头 部 位 置 插入 一 段 脚 本 。 设计 在 页 面 初始 化 完毕 后 , 使 用 styleSheets 
”访问 文档 中 第 二 个 样式 表 ， 然 后 访问 该 样式 表 中 第 一 个 样式 的 color 属性 。 


<script> 
window.onload = function(O{ 
var cssRules = document.styleSheets[] ].cssRules || document.styleSheets[ 1 |].rules; 
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var box = document.getElementBylId("box"); 
box.innerHTML = "第 二 个 样式 表 中 第 一 个 样式 的 color 属性 值 = "+ cssRules[0].style.color: 


} 
</script> 


第 8 步 ， 保 存 页 面 ， 整 个 文档 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
#box {color:green;} 
.Ted {color:red:} 
.blue {color:blue:} 
</style> 
<link href—"stylel.css" rel="stylesheet" type="text/css" media="all" /> 
<script> 
window.onload = function(){ 
Var cssRules = document.styleSheets[]1].cssRules || document.styleSheets[1].rules: 
var box = document.getElementById("box"); 
box.innerHTML = "第 二 个 样式 表 中 第 一 个 样式 的 color 属性 值 ="+ cssRules[0].style.color: 
} 
</script> 
</head> 
<body> 
<div 1d="box"></div> 
</body> 
</html> 


最 后 ， 在 浏览 占 中 预 究 页 面 ， 则 可 以 看 到 访问 的 color 属性 值 为 black， 如 图 15.9 所 示 。 


I Ov 人 Eo 合 localhost 


第 二 个 样式 表 中 第 一 个 样式 的 color 属 性 值 =black 


图 15.9 ”使 用 styleSheets 访问 外 部 样式 表 


会 提示 : 上 面 示例 中 ， styleSheets[1] 表 示 外 部 样式 表 文件 ( stylel.css ) ， 而 cssRules[0] 表 示 外 部 样 ， 
式 表 文 件 中 的 第 一 个 样式 。cssRules[0].style.color 可 以 获取 外 部 样式 表 文 件 中 第 一 个 样式 ， 


的 color 属性 的 声明 值 。 反 之 ， 如 果 把 <link> 标 签 放置 在 内 部 样式 表 的 上 面 ， 即 代码 如 下 : 


<head> 

<link href—"stylel.css" rel="stylesheet" type="text/css" media="all" /> 
<style type="text/css"> 

#box {color:green;} 

Ted {color:red:} 


.415 。 


vote 


Cs 网 页 设计 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


eR 


.blue {color:blue;} 
</style> 
</head> 


则 上 面 脚本 将 返回 内 部 样式 表 中 第 一 个 样式 的 color 属性 值 , 即 green。 如 果 把 外 部 样式 表 转 换 为 


内 部 样式 表 , 或 者 把 内 部 样式 表 转 换 为 外 部 样式 表 文件 ， 不 会 影响 styleSheets 的 访问 。 因 此 ， 样 式 表 
和 样式 的 索引 位 置 是 不 受 样式 表 类 型 和 样式 的 选择 符 限 制 的 。 任 何 类 型 的 样式 表 〈 不 管 是 内 部 的 ， 还 
是 外 部 的 ) 都 在 同一 个 平台 上 按 在 文档 中 解析 位 置 进行 索引 。 同 理 ， 不 同类 型 选择 符 的 样式 在 同一 个 
样式 表 中 也 是 根据 先后 位 置 进行 索引 。 


15.4.4 ”编辑 样式 


cssRules 的 style 对 象 不 仅 可 以 访问 属性 ， 还 可 以 设置 属性 值 。 
【示例 】 在 下 面 示例 中 , 样式 表 中 包含 3 个 样式 ， 其 中 蓝 色 样 式 类 (.blue) 定义 字体 显示 为 蓝 色 。 


利用 脚本 修改 该 样式 类 .blue 规则 ) 字体 颜色 显示 为 浅 灰 色 (#999)， 最 后 显示 效果 如 图 15.10 所 示 。 


<style type="text/css"> 

#box {color:green;} 

Ted {color:red;} 

.blue {color:blue:} 

</style> 

<script> 

window.onload = function(O{ 
Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules: 
cssRules[2].style.color="#999"; /修改 样式 表 中 指定 属性 的 值 


} 
</script> 


<p class="blue"> 原 为 赣 色 字体 ， 现 在 显示 为 浅 灰 色 。</p> 


关 


谍 localhost X 


图 15.10 修改 样式 表 中 的 样式 


会 提示 : 使 用 上 述 方法 修改 样式 表 中 的 类 样式 ， 会 影响 其 他 对 象 或 文档 对 当前 样式 表 的 引用 ， 因 此 


在 使 用 时 请 务必 谨慎。 


15.5 案例 实战 


本 节 将 通过 多 个 案例 帮助 读者 上 机 练习 使 用 JavaScript 控制 CSS 的 方法 。 
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15.5.1 设计 显示 和 隐藏 
简单 的 隐藏 元 素 可 以 通过 style.display 属性 来 实现 。 


【示例 1】 下 面 示 例 能 够 过 有 历 结 构 中 所 有 的 p 元 素 ， 并 把 class 属性 值 不 为 main 的 段落 文本 全 部 


<p>p1</p> 

<p class="main">p2</p> 

<p>p3</p> 

<script> 

var p= document.getElementsByTagName("p"); 

for(var1= 0;1<p.length; 1++ ){ 
if(plil.className =— "main") continue; 
// 如 果 class 属性 值 为 main， 则 跳 过 
plil.style.display = "none"; // 隐 藏 元 素 

} 

</script> 


恢复 style.display 属性 的 默认 值 ， 只 需 设 置 style.display 属性 值 为 空 字符 串 (style.display = "")。 
【示例 2】 由 于 显示 和 隐藏 是 交互 设计 中 经 常用 到 的 技巧 ， 所 以 有 必要 对 其 进行 功能 封装 ， 以 实 
现代 码 重 用 和 灵活 应 用 ， 并 能 够 兼容 不 同 浏览 器 。 


当 指 定 元 素 和 布尔 值 参 数 时 ， 则 元 素 能 够 根据 布尔 值 tue 或 false 决定 是 人 否 进行 显示 或 隐藏 ， 如 ， 


果 不 指定 第 二 个 布尔 值 参 数 ， 则 函数 将 对 元 素 进行 显示 或 隐藏 切换 。 


// 设 置 或 切换 元 素 的 显示 或 隐藏 
// 参 数 : e 表示 要 显示 或 隐藏 的 元 素 ，b 是 一 个 布尔 值 ， 当 为 true 时 ， 将 显示 元 素 e; 
当 为 false 时 ， 将 隐藏 元 素 e。 如 果 省 略 参数 b， 则 根据 元 素 e 的 显示 状态 ， 进 行 显示 或 隐藏 切换 
/返回 值 : 无 
function display(e, b){ 
// 监 测 第 三 个 参数 的 类 型 。 如 果 该 参数 存在 且 不 为 布尔 值 ， 则 抛 出 异常 
ifb && (typeof b != "boolean")) throw new Error(" 第 二 个 参数 应 该 是 布尔 值 '"); 


var ¢ = getStyle(e, "display"): /获取 当前 元 素 的 显示 属性 值 
(c != "none") && (e. display = ¢): /记录 元 素 的 显示 性 质 ， 并 存储 到 元 素 的 属性 中 
e. display =e. display || ""; // 如 果 没 有 定义 显示 性 质 ， 则 赋值 为 空 字符 串 
if(b || (¢ 一 "none") ){ // 当 第 二 个 参数 值 为 tue 或 者 元 素 隐藏 时 
e.style.display = e. display: // 将 调用 元 素 的 _display 属性 值 恢复 元 素 或 显示 元 素 
} 
else{ 
e.style.display = "none'"': /否则 隐藏 元 素 
} 
} 
下 面 在 页 面 中 设置 一 个 同 右 浮动 的 元 素 p。 连 续 调 用 3 次 display0 函 数 后 ， 则 相当 于 隐藏 元 素 ， 
代码 如 下 : 


<p style="float:right; border:solid 1px red; width:100px:; 
height: 100px:">pl1</p> 

<script> 

var p = document.getElementsByTagName("p")[0]; 
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display(p): /切换 隐藏 


display(p); // 切 换 显 示 

display(p); /切换 隐藏 

</script> 

不 管 元 素 是 显示 或 隐藏 ， 如 果 按 如 下 方式 调用 ， 则 会 显示 出 来 ， 元 素 显 示 为 原来 的 状态 : 
display(p, true); // 强 制 显示 


“15.5.2 ”设计 不 透明 度 


所 有 现代 浏览 器 都 广 持 元 素 的 透明 度 ， 但 是 不 同 浏览 器 对 于 元 素 透 明度 的 设置 方法 不 同 。I 下 浏览 


”器 支持 filters 滤 镜 集 ， 而 支持 DOM 标准 的 浏览 器 认可 style opacity 属性 。 同 时 ， 它 们 设置 值 的 范围 也 
不同, 下 的 opacity 属性 值 范围 为 0~100, 其 中 0 表示 完全 透明 , 而 100 表示 不 透明 ; 支持 style.opacity 
”属性 浏览 器 的 设置 值 范围 是 0~1， 其 中 0 表示 完全 透明 ， 而 1 表示 不 透明 。 


【示例 1】 为 了 兼容 人 不同 浏 览 器 ， 可 以 把 设置 元 素 透 明度 的 功能 进行 函数 封装 。 


/设置 元 素 的 透明 度 
/参数 : e 表 示 要 预 设置 的 元 素 ,n 表示 一 个 数值 ， 取 值 范围 为 0 一 100， 如 果 省 略 ， 则 默认 为 100， 即 不 透明 


”显示 元 素 


/返回 值 : 无 
function setOpacity(e, n){ 
var n = parseFloat(n): // 把 第 二 个 参数 转换 为 浮 点 数 
if(n && (n>100) || !n) n=100; 
// 如 果 第 二 个 参数 存在 且 值 大 于 100， 或 者 不 存在 该 参数 ， 则 设置 其 为 100 


In && (n<0)) n=0; /如 果 第 二 个 参数 存在 且 值 小 于 0， 则 设置 其 为 0 
if (e.filters){ // 兼 容 正 浏览 器 
e.style.filter = "alpha(opacity=" + n+ ")"; 
} 
else{ // 兼 容 DOM 标准 
e.style.opacity = n / 100; 
} 


} 
在 获取 元 素 的 透明 度 时 ， 应 注意 在 下 浏览 器 中 不 能 够 直接 通过 属性 读 取 ， 而 应 借助 filters 集合 


| 的 item0 方 法 获取 Alpha 对 象 ， 然 后 读 取 它 的 opacity 属性 值 。 


【示例 2】 为 了 避免 在 读 取 正 浏览 器 中 元 素 的 透明 度 时 发 生 错 误 ， 建 议 使 用 try 语句 包含 读 取 


/获取 元 素 的 透明 度 
/参数 : e 表示 要 预 设置 的 元 素 
/返回 值 : 元 素 的 透明 度 值 ， 范 围 为 1 一 100 
function getOpaclty(e){ 
VaTT; 
1f (! e.filters){ 
1f (e.style.opacity) return parseFloat(e.style.opaclty) * 100; 
} 
tryt 
retum e.filters.i1tem('alpha').opacity 


} 
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catch(o){ 
return 100; 
} 
} 


15.5.3 ”设计 运动 对 象 
运动 效果 主要 通过 动态 修改 元 素 的 坐标 来 实现 ， 设 计 的 关键 有 以 下 两 点 。 


回 “应 考虑 元 素 的 初始 化 坐标 、 最 终 坐标 ， 以 及 移动 坐标 等 定位 要 素 。 如 果 参 照 物 相同 ， 则 这 个 训 


问题 比较 好 解决 。 
回 ”注意 移动 的 速度 、 频 率 等 问题 。 移 动 可 以 借助 定时 器 来 实现 ， 但 效果 的 模拟 涉及 算法 问题 ， 


不 同 的 算法 ， 可 能 会 设计 出 不 同 的 移动 效果 ， 如 匀速 运动 、 加 速 运动 和 减速 运动 。 在 Flash ， 


动画 设计 中 ， 专 门 提供 了 一 个 Tween 类 ， 利 用 它 可 以 模拟 出 很 多 运动 效果 ， 如 缓 动 、 弹 赞 
震动 等 效果 ， 其 技术 核心 是 算法 设计 问题 。 算 法 好 像 很 高 深 ， 如 果 通 俗 一 点 讲 ， 就 是 通过 数 
学 函数 计算 定时 器 每 次 触发 时 移动 的 距离 。 


【示例 】 下 面 示例 演示 如 何 设计 一 个 简单 的 元 素 滑动 效果 。 通 过 指向 元 素 、 移 动 的 位 置 ， 以 及 移 ， 
动 的 步 数 , 可 以 设计 按 一 定 的 速度 把 元 素 从 当前 位 置 移动 到 指定 的 位 置 。 本 示例 引用 前 面 介 绍 的 getBO ， 


方法 ， 该 方法 能 够 获取 当前 元 素 的 绝对 定位 坐标 值 。 


/简单 的 滑动 函数 
/参数 : e 表示 元 素 ，x 和 y 表示 要 移动 的 最 后 坐标 位 置 (相对 包含 块 )，t 表示 元 素 移动 的 步 数 
function slide(e, x, y, t){ 
vart=t|| 100; /初始 化 步 数 ， 步 数 越 大 ， 速 度 越 慢 ， 移 动 的 过 程 越 通 真 ， 但 是 中 间 移 动 的 误差 就 越 明 显 


var 0 = getB(e); /当前 元 素 的 绝对 定位 坐标 值 
Var X0 = 0.X; 
var yO0— aay; 


var stepx = Math.round((x - x0) /1t); 
/计算 X 轴 每 次 移动 的 步 长 ， 由 于 像素 点 不 可 用 小 数 ， 所 以 会 存在 一 定 的 误差 
var stepy = Math round((y - y0) / 0: /计算 y 轴 每 次 移动 的 步 长 


var out = setInterval(function(){ /设计 定时 器 

var 0 = getB(e); // 获 取 每 次 移动 后 的 绝对 定位 坐标 值 
var X0 = 0.X; 

Var y0 = 0.y,; 


e.style["left"] = (x0 + stepx) + 'px'; // 定 位 每 次 移动 的 位 置 
e.style["top"] = (y0 + stepy) + 'px'; // 定 位 每 次 移动 的 位 置 
1f (Math.abs(x - x0) <= Math.abs(stepx) || Math.abs(y - y0) <= 
Math.abs(stepy)) { 。”// 如 果 距 离 终 点 坐标 的 距离 小 于 步 长 ， 则 停止 循环 执行 ， 并 校正 元 素 的 最 终 坐 标 位 置 
e.style["left"] = x + 'px'; 
e.style["top"| =y + 'px'; 
clearTimeout(out); 


},2) 
让 


使 用 时 应 该 定义 元 素 绝 对 定位 或 相对 定位 显示 状态 ， 否 则 移动 无 效 。 在 网 页 动画 设计 中 ,一 般 都 ， 


使 用 这 种 定位 移动 的 方式 来 实现 。 


<style type="text/css"> 
.block {width:20px:; height:20px: position:absolute; left:200px: 
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& 


top:200px; background-color:red:} 

</style> 

<div class="block" 1d="block1"></div> 
<script> 

templ] = document.getElementById('block!1"); 
slide(temp]1, 400, 400,60); 

</script> 


“15.5.4 设计 渐变 效果 


渐 隐 渐 显 效果 主要 通过 动态 修改 元 素 的 透明 度 来 实现 。 


【示例 】 下 面 示例 演示 如 何 实现 简单 的 渐 隐 渐 显 动 男 效果 ， 涉 及 setOpacity0 函 数 的 调用 。 


// 渐 隐 渐 显 动画 显示 图 数 


/参数 : e 表示 渐 隐 渐 显 元 素 ，t 表示 渐 隐 渐 显 的 速度 ， 值 越 大 ， 渐 隐 或 渐 显 的 速度 越 慢 ， 


io 表示 渐 隐 或 渐 显 方式 ， 取 值 true 表示 渐 显 ， 取 值 false 表示 渐 隐 


function fade(e,t 10){ 
vart=t|| 10: /初始 化 渐 隐 渐 显 速度 
ifio){ /初始 化 渐 隐 渐 显 方式 
var1= 0; 
}else{ 
var 1= 100: 
} 
var out = setInterval(function() { // 设 计 定 时 器 
setOpacity(e, i); // 调 用 setOpacity0 函 数 
ifio) { /根据 渐 隐 或 渐 显 方式 决定 执行 效果 
二 
lf >= 100) clearTimeout(out); 
} 
else{ 
2 
if(1 <=0) clearTimeout(out); 
， 
Sy 
} 
下 面 调用 该 函数 : 


<style type="text/css"> 

.block {width:200px; height:200px; background-color:red:} 

</style> 

<div class="block" 1d="blockl1"></div> 

<script> 

e = document.getElementBylId('block]1"); 

fade(e,50,true); /应 用 渐 隐 渐 显 动画 效果 
</script> 


办 15.5.5 ”设计 折叠 面板 


折 有 登 面板 在 网 页 中 的 应 用 范围 比较 广 ， 从 技术 角度 分 析 ， 它 主要 利用 CSS 隐藏 和 显示 属性 ， 借 
| 助 JavaScript 脚本 进行 动态 控制 。 本 区 设计 的 折 有 登 面板 演示 效 末 如 图 15.11 和 图 15.12 所 示 。 
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1 
| 
1 
| EE htpxyocalhosym 局 - BS localhost x 从 大 | E hte/Nocalhost/m  - B © | & localhost ;> 他 六 


图 15.11 展开 面板 效果 图 15.12” 折 起 面板 效果 


【操作 步骤 】 


第 1 步 ， 启 动 Dreamweaver， 新 建文 档 , 保存 为 test.html。 构建 HTML 结构 ， 结 构 没 有 特殊 要 求 ， / 
使 用 任何 两 个 标签 均 可 实现 折合 效果 ， 但 是 从 语义 角度 来 考虑 ， 使 用 定义 列表 是 最 佳 语义 结构 选择 。 
dl 元 素 负责 构建 折 倒 面 板 的 外 框 ，dt 元 素 负责 构 建 折 县 面 板 的 标题 栏 ， 而 dd 元 素 负责 构建 面板 主体 
包含 杠 。 
<dl> 
<dt> 标 题 </dt> 
<dd> 折 营区 域 <img src="images/3.jpg" width="300" /></dd> 
</dl> 


第 2 步 ， 在 设计 折 释 行为 之 前 ， 先 假设 这 是 一 个 普通 的 列表 结构 ， 然 后 使 用 CSS 来 控制 定义 列 | 
表 框 的 表现 效果 。 | 


<style type="text/css"> | 
dl {* 定 义 列表 框 样式 */ | 
width:400px: 诺 定 义 折 车 面板 的 宽度 ， 可 自 定 义 */ 
border:solid 1px #ccc:;: 放 边 杠 ， 可 自 定义 */ | 
font-size:12px: /* 字 体 大 小 ， 可 自 定义 #/ 
} | 
dt {l* 列 表 标 题 样式 类 
background:#7FECAD url(images/green.gif) repeat-X: 上 用 背景 图 定义 渐变 标题 背景 */ 
color:#71790C: /# 字 体 颜 色 ， 可 自 定 义 #/ 
height:28px:; 上 旋 标 题 高 度 */ 
line-height:28px: /# 行 高 ， 间 接 实 现 垂 直 对 齐 状 
padding-left:lem: 诺 增 加 左 侧 空 际 */ | 
border-bottom:solid 1px #efefef: /# 底 部 边框 样式 #/ 
cursor:pointer: 谍 鼠 标 指针 为 手 形 */ | 
} | 
dd {/* 列 表 项 样式 */ | 
padding:2px 4px:; 此 增加 内 容 框 内 边 距 */ | 
margin:0; 记 清 除 缩 进 */ | 
} | 
</style> | 


. 421 。 


Csss 网 页 设计 从 入 门 到 精通 ( 微 课 精 编 版 ) 


第 3 步 ， 在 上 面 样式 表 的 基础 上 定义 两 个 类 样式 ， 分 别 用 来 隐藏 和 显示 对 象 。 


.expand {overflow:visible:} 诺 展 开 面 板 时 ， 显 示 所 有 内 容 区 域 */ 

.collapse { /# 折 登 面 板 时 ， 仅 显示 标题 区 域 拆 
height:28px: /# 限 制 列 表 包 含 框 高 度 ， 使 其 等 于 标题 栏 高 度 状 
overflow:hidden: 诺 强 制 隐藏 多 出 的 区 域 */ 

} 


第 4 步 ， 完 成 结构 层 和 表现 层 的 设计 后 ， 下 面 设计 交互 层 。 在 JavaScript 脚本 中 定义 一 个 函数 
SwitchO 用 作 展 开 和 折 有 登 的 开关 。 


<script> 

function Switch(db{fV 折 县 控制 函数 
var dl = dtparentNode: /获取 标题 栏 的 父 包 含 框 
if(dl.className 一 "collapse")dl.className = "expand"; ”// 如 果 为 折合 ， 则 展开 类 样式 
else dl.className = "collapse": /相反 调用 折 登 类 样式 

} 

人 


第 5 步 ， 完 成 脚本 函数 的 设计 ， 然 后 把 它 绑 定 到 标题 栏 的 onclick 事件 属性 上 面 ， 代 码 如 下 : 
<dt onclick="Switch(this)"> 标 题 </dt> 
这 里 使 用 this 关键 字 作为 参数 进行 传递 ， 它 代表 当前 dt 元 素 的 引用 。 人 至 此 ， 整 个 折 盖 面板 的 设 


计 束 完成 了 。 


办 15.5.6 ”设计 工具 提示 


Tooltip 〈 工 具 提 示 ) 是 一 种 比较 实用 的 JavaScript 应 用 。 当 为 一 个 元 素 〈 一 般 为 超 链接 a 元 素 ) 
定义 title 属性 时 ， 会 在 鼠标 经 过 时 显示 提示 信息 ， 这 些 提 示 能 够 详细 描绘 经 过 对 象 的 包含 信息 ， 这 对 


“于 超 链接 (特别 是 图 像 式 超 链接 ) 非常 有 用 。 同 时 ， 搜 索引 擎 也 喜欢 检索 这 些 信息 。 


设计 思路 : 使 用 DOM 技术 获取 tile 〈 或 其 他 属性 ) 中 的 提示 信息 ， 然 后 把 这 些 属性 删除 ， 再 利 
用 JavaScript 脚本 动态 生成 一 个 浮动 的 层 ， 在 层 中 显示 这 些 提示 信息 ， 最 后 利用 Even 事件 对 象 的 鼠 


， 标 指针 坐标 属性 进行 定位 。 如 果 结 合 CSS 技术 ， 可 以 把 这 些 浮动 的 层 设计 成 不 同样 式 ， 以 此 达到 个 
性 化 设计 的 要 求 。 


【示例 1】 本 示例 不 涉及 结构 层 和 表现 层 的 设计 ， 为 了 化 繁 为 简 ， 这 里 先 就 一 个 简单 的 案例 来 探 
索 Tooltip 脚本 的 实现 过 程 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 testhtml。 在 文档 中 设计 如 下 超 链接 ， 其 提示 信 


” 息 设 置 为 “title=" 提 示 信 息 "”。 下 面 尝试 把 这 个 提示 信息 提取 出 来 ， 然 后 删除 该 属性 ， 最 后 使 用 一 个 


新 创建 的 div 元 素 动 态 显 示 它 的 位 置 ， 并 借助 CSS 美化 一 下 该 div 元 素 。 
<a href 伍 "#" title=" 提 示 信 息 " target="_blank"> 超 链接 文本 </a> 
第 2 步 ， 在 脚本 中 获取 超 链接 元 素 a， 以 及 该 标签 设置 的 title 属性 值 。 代 码 如 下 : 


var a = document.getElementsByTagName("a")[0]: // 获 取 a 元素 的 引用 

var tit =a.getAttribute("title"): // 获 取 title 属性 值 ， 并 存储 到 一 个 变量 中 
第 3 步 ， 获 取 title 属性 值 之 后 ， 删 除 该 属性 ， 避 免 它 干扰 设计 。 

a.removeAttribute("title"): // 移 除 title 属性 
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到 div 元 素 内 ， 设 置 div 元 素 样式 为 绝对 定位 ， 并 增加 一 个 class 属性 和 值 ， 以 便于 在 CSS 样式 表 中 | 
对 该 div 元 素 进行 更 个 性 的 控制 。 


var div = document.createElement("div");: // 创 建 div 元 素 节 点 | Ep | 
var txt= document.createTextNode(tit): // 创 建文 本 节点 ， 并 显示 title 属性 值 ， 
div.style.position = "absolute"; /为 div 元 素 定 义 一 个 绝对 定位 
div.setAttribute("class", "title"); /为 div 元 素 增 加 一 个 类 样式 ， 兼 容 非 正 
div.setAttribute("className", "title"): // 为 div 元 素 增 加 一 个 类 样式 ， 兼 容 正 
div.appendChild(tx?t); // 获 取 title 属性 值 ， 并 传递 给 div 元 素 | 


第 5 步 ， 为 超 链接 a 元素 绑 定 鼠标 经 过 和 鼠标 移出 的 事件 处 理 函 数 。 设 计 当 鼠 标 指针 移 过 超 链接 ， 
文本 时 ， 把 创建 的 div 元 素 节点 增加 到 该 a 元 素 中 ， 而 当 鼠 标 指针 移出 超 链接 文本 时 ， 把 a 元 素 中 增 ， 
加 的 div 节点 删除 。 


a.onmouseover = function(O { // 鼠 标 经 过 事件 处 理 函 数 
aappendChild(div): /把 div 元 素 增加 到 a 元 素 中 | 
| 
a.onmouseout = functionO{ // 鼠 标 移出 事件 处 理 函 数 ] 
a.removeChild(div); // 把 a 元素 中 的 div 元 素 删除 | 
} | 


第 6 步 ， 定 义 鼠 标 移 动 事件 处 理 函数 ， 实 时 跟踪 鼠标 指针 的 坐标 ， 并 利用 该 坐标 来 定位 创建 的 ， 
div 元 素 的 显示 位 置 ， 以 实现 它 始 终 显示 在 鼠标 指针 的 右 下 角 。 
第 7 步 ， 在 CSS 样式 表 中 为 title 类 定义 类 样式 。 
至 此 ， 整 个 提示 框 效 果 就 设计 完成 了 。 在 浏览 器 中 预览 ， 则 显示 效果 如 图 15.13 和 图 15.14 所 示 。 


<style type="text/css"> 
.title {/* 提 示 框 类 样式 */ | 
padding:4px 8px: 上 谍 增 加 内 侧 补 白 */ ] 
border:solid 2px red: 诺 设 计 边 框 样式 */ 
background:blue; 让 定义 背景 为 蓝 色 */ | 
color:#ffF: 诺 定 义 字 体 为 白色 */ | 
text-decoration:none: /# 清 除 受 a 元 素 影响 而 产生 的 下 男 线 */ | 
} | 
</style> | 


xX Xx 
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图 15.13 指定 元 素 的 提示 框 演示 效果 (1) 图 15.14 指定 元 素 的 提示 框 演示 效果 (2) 


【示例 2】 示例 1 仅 就 页 面 中 某 个 具体 的 超 链接 来 定义 提示 框 ， 但 是 在 实际 设计 中 无 法 预测 页 面 ， 
中 到 底 有 多 少 超 链 接 , 为 此 需要 使 用 遍历 a 元 素 节点 集合 技术 来 实现 动态 为 页 面 中 所 有 超 链 接 设 计 提 ， 
示 框 ， 演 示 效 果 如 图 15.15 和 图 15.16 所 示 。 
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并 localhost 


图 15.15 为 页 面 中 所 有 超 链接 设计 提示 框 演示 效果 (1) 图 15.16 为 页 面 中 所 有 超 链接 设计 提示 框 演示 效果 (2) 


为 实现 上 述 演示 效果 ， 本 示例 依然 采用 示例 1 的 设计 思路 ， 只 不 过 中 间 增 加 了 for 循环 结构 来 过 
历 文 档 中 所 有 的 超 链接 元 素 a。 

【操作 步骤 】 

第 1 步 ， 复 制 testhtml， 另 存 为 test2.html。 在 页 面 初 始 化 事件 中 绑 定 一 个 事件 处 理 函 数 ， 然 后 获 
取 页 面 内 所 有 a 元 素 的 引用 。 


window.onload = functionO{ 


var a = document.getElementsByTagName("a"): // 创 建 div 元 素 节点 

} 

第 2 步 ， 在 该 事件 处 理 函 数 内 ， 完 成 示例 1 的 操作 。 

for(vari= 0:; i< a.length: i ++ ){ // 遍 历 页 面 内 所 有 a 元素 
tit = alil.getAttribute("title"): /获取 a 元 素 的 title 属性 值 
iftib afi].removeAttribute("title"): /如 果 属 性 值 存 在 ， 则 删除 该 属性 
var div = document.createElement("div"): // 创 建 div 元 素 节点 
var txt = document.create TextNode(tit); // 创 建 并 把 提示 信息 赋 给 文本 节点 
div.setAttribute("class", "title"); /为 div 元 素 增加 类 属性 ， 兼 容 Firefox 
div.setAttribute("className", "title"):; /为 div 元 素 增加 类 属性 ， 兼 容 正 
div.style.position = "absolute"; // 绝 对 定位 div 元 素 
div.appendChild(txt): // 把 文本 节点 增加 到 div 元 素 

} 


第 3 步 ， 设 计 鼠 标 经 过 和 移出 的 事件 处 理 函 数 ， 以 实现 增加 和 删除 div 到 a 元 素 。 考 虑 到 在 函数 
体内 定义 闭 包 是 无 法 与 外 界 进行 数据 交流 的 ， 为 此 在 这 里 主动 为 闭 包 函数 传递 外 部 动态 参数 。 


ali].onmouseover = (function(i,div){ // 鼠 标 经 过 时 的 事件 处 理 函 数 
return function(O) { // 返 回 处 理 函 数 
a[i].appendChild(div): // 为 a 元素 增加 div 元 素 
} 
Gdiw: /为 闭 包 函 数 传递 参数 ，i 表示 循环 变量 值 ，div 表示 引用 
afil.onmouseout = (function(i,div){ // 鼠 标 移出 时 的 事件 处 理 函 数 
return function() { // 返 回 处 理 函 数 
ali].removeChild(div): /为 a 元素 移 除 div 元 素 
} 
DL,div); 


第 4 步 , 设计 鼠标 指针 移动 的 事件 处 理 函 数 。 为 了 能 够 兼容 不 同 主流 浏览 器 ， 以 及 考虑 浏览 器 窗 
口 可 能 会 出 现 深 动 条 ， 这 里 使 用 多 个 条 件 结构 进行 判断 来 设置 指针 的 坐标 值 ， 读 者 需要 了 解 Event 对 
象 的 属性 ， 详 细 内 容 可 以 参阅 第 14 章 讲 解 。 
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af[il.onmousemove = (function(div,e){// 第 1 个 参数 表示 定位 元 素 ， 第 2 个 参数 表示 事件 参数 
return function(e) {// 闭 包 内 返回 函数 体 


var posx = 0, posy = 0; 
// 判 断 当前 浏览 器 ， 如 果 为 正 ， 则 使 用 window.event 获取 鼠标 指针 


// 定 义 两 个 局 部 变量 ， 用 来 存储 鼠标 指针 的 坐标 


if(e == null) e = window.event; 


// 判 断 是 否 文 持 pageX 或 pageY 事件 属性 ， 如 果 支 持 ， 表 示 浏 览 器 文 持 DOM 2.0 (如 Firefox 等 )， 


此 时 可 以 使 用 这 两 个 属性 获取 鼠标 指针 在 窗口 中 的 坐标 


} 
D(dv); 


全 提示 : 


本 节 专 题 练习 使 用 JavaScript 控制 CSS 脚本 样式 ， 感 兴趣 的 读者 可 以 扫 码 练习 。 


if(e.pageX || e.pageY){ 
posX = e.pageX.; 
posy = e.pageY, 


} 
else if(e.clientX || e.clientY){// 如 果 不 支 持 pageX 或 pageY， 则 使 用 clientX 或 clientY 
/如 果 文 持 document.documentElement.scrollTop 属性 ， 则 计算 指针 坐标 
if(document.documentElement.scrollTop){ 
posx = e.clientX + document.documentElement.scrollLeft: 
posy = e.clientY + document.documentElement.scrollTop: 
}else{// 否 则 使 用 传统 的 方法 来 计算 指针 的 坐标 位 置 
posx = e.clientX + document.body.scrollLeft: 
posy = e.clientY + document.body.scrollTop:; 


} 
} 
div.style.top = (posy + 20) + "px"; // 把 鼠标 指针 的 y 坐标 作为 定位 值 赋 给 div 
div.style.left = (posx + 10) + "px"; // 把 鼠标 指针 的 x 坐标 作为 定位 值 赋 给 div 


documentElement 在 DOM 2.0 中 表示 html 元 素 ， 因 此 要 获取 当前 页 面 的 滚动 条 纵 坐 标 位 | 


i 可 以 使 用 如 下 方法 : 
document.documentElement.scrollTop; 


如 果 浏 览 器 不 支持 documentElement 对 象 ， 则 可 以 使 用 如 下 方法 获取 滚动 条 纵 坐 标 位 置 : 


document.body.scrollTop; 


这 里 body 对 象 表示 body 元 素 ， 而 document 表示 文档 对 象 ，scrollTop 属性 表示 滚动 条 的 
纵 坐 标 。 在 标准 W3C 下 ，document.body.scrollTop 始终 为 0， 需 要 使 用 document. | 
documentElement.scrollTop 来 获取 滚动 条 坐标 .下 浏览 器 从 5.5 版 本 开始 不 再 支持 document 
body.scrollTop 和 document.body. scrollLeft 方法 ， 所 以 在 编程 中 一 般 使 用 示例 中 的 方法 来 = 


进行 判断 。 


15.6 在 线 练 司 
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使 用 CSS 设计 XML 文档 样式 


XML 是 一 种 允许 用 户 自 定义 标签 的 标识 语言 ， 用 法 比 HTML 灵活 ， 功 能 更 强大 。XML 
可 以 标识 数据 ， 作 为 一 种 通用 数据 格式 ， 非常 适合 Web 传输 ，XML 也 是 传统 桌面 应 用 中 比 
较 流 行 的 数据 存储 和 交换 格式 。 本 章 将 讲解 如 何 使 用 CSS 设计 XML 文档 样式 。 


【 学 习 重 点 】 
中 熟悉 XML 文档 结构 。 
| 能 够 使 用 CSS 设计 XML 显示 样式 。 


第 10 章 使 用 CSS 设计 XINMC 文档 样式 


16.1 XML 样式 基础 / 

XML 是 可 扩展 标签 语言 的 英文 首 字母 缩写 ， 在 结构 上 与 HTML 相似 ， 但 是 XML 优势 明显 : 通 ， 
用 、 结 构 简洁 ， 非 常 适合 各 种 网 络 应 用 的 需要 。 
16.1.1 XML 文档 结构 上 


XML 文档 也 是 文本 文件 ， 扩 展 名 为 .xml。XML 文档 结构 一 般 包 含 3 部 分 : XML 声明 、 处 理 指 ， 
令 和 XML 元 素 。 其 中 处 理 指 令 是 可 选 部 分 。 | 
| 


【示例 】 新 建文 本 文件 ， 保 存 为 test.xml， 然 后 输入 下 面 代码 。 


<?xml version="1.0" encoding="utf-8"?> 
<blog> 
<item> 
<id>1</id> 
<title> 标 题 </title> 
<content> 日 志 内 容 </content> 
<word> 
<user> 上 昵称 </user> 
<time> 留 言 时 间 </time> 
<text> 留 言 内 容 </text> 
</word> 
</item> | 
</blog> 


上 面 代码 是 一 个 非常 简单 的 XML 文档 ,与 HTML 文档 结构 相似 , 但 是 标签 可 以 随意 命名 ,没有 
任何 默认 格式 ， 仅 是 数据 信息 的 语义 标识 。 在 浏览 器 中 预览 ， 显 示 效 果 如 图 16.1 所 示 。 


Xx 


各 > 叶 -| 恒 http:Wlocalhost8080/ ~ @ © || @ localhost 关 个 太 这 


< ?xml version= "1.0” encoding="UTF-8"?> | 
- <blog> 
- <item> | 
<id>1</id> 
<title> 标题 </title> 
=<time 志 发布 时 间 =/time= 
<content> 日 志 内 容 </content> 
- <Word> | 
<user> 上 昵称 </user> 
<time> 留 言 时 间 </time> | 
二 text~ 留言 内 容 </text~ 
</viord> 
</item> 
</blog> | 
| 


图 16.1 XML 文档 显示 效果 
在 上 面 的 代码 中 ， 第 1 行 代码 表示 XML 声明 ， 从 第 2 行 开 始 是 各 种 标签 嵌 套 在 一 起 。 与 HIML 一 | 
样 ，XML 也 是 一 个 基于 文本 的 标签 语言 ， 不 同 的 是 ，XML 标签 说 明了 数据 的 含义 ， 而 不 是 如 何 显示 它 。 
【拓展 】 | 
XML 文档 内 容 都 是 由 一 个 根 节点 构成 的 (如 blog)， 它 由 开始 标签 <blog> 和 结束 标签 </blog> 组 成 。 | 
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开始 标签 与 结束 标签 之 间 就 是 这 个 元 素 的 内 容 。 由 于 各 个 元 素 的 内 容 被 各 目的 元 素 标 签 所 包含 ， 在 


XML 中 各 种 数据 的 分 类 香 找 和 处 理 变 得 非常 容易 。 


XML 标签 包含 3 部 分 : 标签 的 起 始 符 “<”、 标 签 的 名 称 和 标签 的 终止 符 “>”， 标 签 的 名 称 也 称 


”为 元 素 ， 它 表示 一 个 对 象 。 标 签 的 起 始 和 终止 符 分 别 为 ASCII 编码 的 小 于 号 和 大 于 号 。 在 HTML 中 


标签 都 是 预定 义 的 ， 包 含 默 认 的 显示 样式 ， 而 在 XML 中 标签 名 称 是 不 固定 的 ， 可 以 根据 需要 来 定义 
和 使 用 标签 。XML 也 支持 空 标签 ， 如 <blog></blog>， 一 般 可 以 简写 为 < blog />。 

在 XML 中 可 以 根据 需要 为 标签 定义 属性 。 在 开始 标签 或 空 标签 中 可 以 包含 多 个 属性 ， 属 性 的 作 
用 是 对 标签 及 其 内 容 的 附加 信息 进行 描述 。 

XML 属性 由 使 用 空格 分 阳 开 的 名 / 值 对 构成 。 所 有 的 属性 值 部 必 须 使 用 引号 括 起 来 。 语 法 形式 如 下 : 

< 标签 名 属性 名 1=" 属 性 值 1" 属性 名 2=" 属 性 值 2" 属性 名 3=" 属 性 值 3"..> 元 素 内 容 </ 标 签名 > 


例如 : 

< 留言 姓名 =" 张 三 " QQ="666666666" Emai ="zhangsan(Q263.net" 留言 时 间 ="2017-4-5 16:39:26"> 
这 里 是 我 的 留言 

</ 留 言 > 


对 于 空 元 素 ， 其 语法 形式 如 下 : 
< 标签 名 属性 名 1=" 属 性 值 1" 属性 名 2=" 属 性 值 2" 属性 名 3=" 属 性 值 3"... /> 
元 素 和 属性 都 可 以 描述 信息 ， 那 么 该 使 用 属性 ， 还 是 使 用 元 素 呢 ? 一 般 来 讲 ， 具 有 如 下 特征 的 信 


，” 奶 可 以 考虑 使 用 属性 来 表示 。 


与 文档 无 关 的 简单 信息 。 例 如 ，< 书 桌 长 ="240cm" 宽 ="80cm'" 高 ="100cm" 人 户 中 的 “书桌 ” 
元 素 ， 其 目的 是 同 用 户 展示 一 个 书 保 ， 但 书 人 桌 的 大 小 与 用 户 基 本 无 关 ， 而 且 其 “长 、 宽 和 高 ” 
也 没有 子 结构 。 在 这 种 情况 下 ， 就 可 以 将 矩形 的 “长 、 宽 和 高 ”信息 作为 元 素 的 属性 进行 定义 。 
与 文档 有 关 , 而 与 文档 的 内 容 无 关 的 简单 信息 。 例如 ,<Email 发 送 时 间 ="2017-4-5 16:39:26" 
发 送 人 =" 张 三 " > 这 里 是 电子 邮件 内 容 </Email>。 
当然 ， 有 很 多 信息 既 可 以 用 元 素来 表示 ， 也 可 以 用 属性 来 表示 。 例如， 对 于 上 面 示例 中 的 留言 信 
息 ， 以 及 与 留言 相关 的 属性 ， 这 些 留言 属性 既 可 以 使 用 元 素来 表示 ， 也 可 以 使 用 属性 来 表示 。 


人 写 提示 : 在 将 已 有 文档 处 理 为 XML 文档 时 ， 文 档 的 原始 内 容 应 全 部 表示 为 元 素 ; 而 编写 者 所 增加 


的 一 些 附加 信息 ， 如 对 文档 某 一 点 内 容 的 说 明 、 注 释 、 文 档 的 某 些 背景 材料 等 信息 可 以 表 
示 为 属性 ， 当 然 前 提 是 这 些 信息 非常 简单 。 

在 创建 和 编写 XML 文档 时 ， 布 望 显示 的 内 容 应 表示 为 元 素 ， 即 能 够 在 浏览 器 中 显示 出 来 
的 信息 ， 反 之 表示 为 属性 。 

实在 无 法 确定 表示 为 元 素 或 属性 的 ， 就 可 以 表示 为 元 素 。 因 为 对 于 文档 处 理 来 讲 ， 元 素 比 
属性 容易 操作 。 


16.1.2 ”多 入 CSS 样式 


在 XML 中 应 用 CSS 的 方式 有 3 种 ， 这 与 HIML 应 用 CSS 相似 。 

内 部 声明 CSS: 在 XML 文档 中 直接 置 入 CSS 样式 。 

连接 CSS 样式 表 : 新 建 CSS 样式 表 文 件 ， 然 后 使 用 命令 将 XML 文档 与 CSS 文件 关联 在 一 起 。 
内 置 CSS 样式 表 : 新 建 CSS 样式 表 文 件 ， 然 后 在 XML 文档 内 部 样式 表 中 使 用 @import 导入 。 
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XML 文档 内 部 包含 的 CSS 样式 被 称 为 内 部 CSS。 为 了 将 CSS 样式 置 入 XML 文档 内 部 ， 关 让 处 
理 器 识别 哪些 是 CSS 样式 , 哪些 是 XML 元 素 , 需要 引入 <style> 标 签 , 并 且 通 过 名 域 机 制 引 入 <style>， 


具体 格式 如 下 : 
< 根 元 素 名 xmlns:html="http://www.w3.org/TR/REC-HTML40"> 


这 是 一 个 名 域 声明 语句 ,http://www.w3.org/TR/REC-HTML40 是 定义 HTML 标签 的 名 域 (文件 )， 


为 了 在 XML 文档 中 引入 HTML 的 标签 <style> 和 </style>， 必 须 指 定 它 的 来 源 和 作用 ， 然 后 把 所 有 的 


在 XML 文档 中 可 能 出 现 的 CSS 样式 指令 都 放 在 <style> 标 答对 中。HTML 标签 的 名 域 文件 有 很 多 , 根 ， 


据 文 档 类 型 可 以 酌情 设置 。 例 如 ， 下 面 声明 定义 XHTML1 文档 类 型 。 
< 根 元 素 名 xmlns:html=" http://www.w3.org/1999/xhtml "> 


< 入 注意 : 有 了 这 条 名 域 声明 语 身后， 在 XML 文档 中 使 用 “HTML:” 为 前 级 ,后面 可 指定 任何 HIML 


标签 ， 如 <HTML:DIV> 和 </HTML:DIV>、<HTML:A> 和 </HTML:A> 等 。 
具有 内 部 CSS 的 XML 文档 引用 方式 如 下 : 
<html:style>。 
这 里 引入 的 HTML 标签 来 自 HIML4 文档 类 型 。 格 式 如 下 : 


<?xml version="]1.0" encoding="gb2312" standalone="yes" ?> 
<?xml-stylesheet type="text/css" ?> 
< 根 元 素 xmlns:html="http://www.w3.org/TR/REC-HTIML40"> 


<html:style> 
CSS-selectorl {属性 名 :属性 值 ， 属 性 名 :属性 值 ，……… } 
CSS-selector2{ 属 性 名 :属性 值 ， 属 性 名 :属性 值 ，…… } 
ET 
<XML 元 素 1……*> 元 素 内 容 </XML 元 素 1> 
<XML 元 素 1……*> 元 素 内 容 </XML 元 素 1> 
</ 根 元 素 > 


【示例 】 在 下 面 示例 中 ， 通 过 在 XML 文档 内 部 定义 样式 表 ， 实 现 对 XML 文档 显示 样式 进行 控 


制 ， 显 示 效 果 如 图 16.2 所 示 。 注 意 HTML 名 域 URL 的 引用 。 


<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type="text/css"?> 
<poetry xmlns:html="http:/Wwww.w3.org/1999/xhtml"> 
<html:style> 
poetry { 
background-color: #FFC.:; 
display: block: 
margin: 2em; 


- 


} 
head { 


display: block: 
font-size: 32px; 
color: Ted: 
text-allgn: center; 
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} 

author { 
display: block: 
font-slze: 20pX: 
color: blue; 
text-align: center; 
margin:12px 0: 

} 

content { 
display: block: 
font-size: 16px; 
color: green:; 
text-allgn: center; 
line-height: 1.8em:; 
padding-left: 2em:; 

} 

</html:style> 

<head> 静 夜 思 </head> 

<author> 李 和 白 </author> 


<content> 床 前 明月 光 ， 疑 是 地 上 箱 。</content> 
<content> 举 头 望 明月 ， 低 头 思 故 乡 。</content> 
</poetry> 


x 


Ce - htp://ocalho... - B 上 


静夜 思 


他 日 


床 前 明月 光 ， 疑 是 地 上 需 。 
举 头 望 明 月 ， 低 头 思 帮 乡 。 


图 16.2 通过 内 部 CSS 样式 控制 XML 文档 效果 


在 上 面 的 代码 中 ， 第 1 行 是 XML 文件 的 头 部 声明 ， 作 为 一 个 格式 民 好 的 XML 文档 ， 应 该 添加 
头 部 的 声明 信息 。 第 2 行 是 CSS 样式 的 声明 , 其 中 , xml-stylesheet 的 意思 是 为 XML 文档 添加 样式 表 ， 


”type="text/css" 的 意思 是 样式 表 的 类 型 是 CSS 样式 表 。 第 4 行 和 第 31 行 中 间 的 内 容 则 是 CSS 样式 的 
， 内容， 其 中 第 4 行 用 来 声明 添加 CSS 代码 ， 第 31 行 则 是 它 的 封闭 标签 。 后 面 的 几 行 是 XML 文档 的 
| 内容。 在 添加 了 CSS 样式 之 后 ， 在 下 中 打开 这 个 XML 文档 ， 效 果 如 图 16.2 所 示 。 


”16.1.3 使 用 CSS 样式 表 


一 般 建 议 使 用 外 部 CSS 样式 表 ， 将 所 有 规范 XML 元 素 的 样式 用 一 个 独立 的 CSS 文件 保存 ， 使 


”用 起 来 会 更 方便 。 


建立 CSS 样式 表 文 件 后 ， 需 要 将 CSS 文档 与 对 应 的 XML 文档 关联 ， 这 是 在 XML 文档 头 部 用 


语句 来 完成 的 : 


<?xml-stylesheet type="text/css" hre 人 "CSS 文档 的 URL" ?> 
在 这 条 声明 语句 中 ，type 用 来 指定 文档 类 型 ， 这 里 表明 是 文本 、CSS 类 型 。href 用 来 指明 引用 的 
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| 
| 
CSS 文档 的 位 置 、 名 称 和 扩展 名 ， 即 CSS 文档 的 通用 资源 定位 地 址 。 
【示例 】 下 面 示例 演示 如 何 导 入 外 部 样式 表 文 件 。 
【操作 步骤 】 | 

第 1 步 ， 新 建 XML 文档 ， 保 存 为 index.xml。 | 

| 


第 2 步 ， 输 入 下 面 代 码 ， 设 计 与 唐诗 相关 的 标识 内 容 。 


第 3 步 ， 新 建 CSS 样式 表 文 件 ， 保 存 为 style.css。 
第 4 步 ， 输 入 下 面 样式 代码 。 


第 5 步 ， 在 index.xml 文档 头 部 位 置 ， 即 第 2 行 位 置 ， 使 用 <?xml-stylesheet> 命 令 导 入 外 部 样式 表 
文件 style.css。 


Amlsgylesheet yper'textcss' href stylecs> 
第 6 步 ， 保 存 文档 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 16.3 所 示 。 


三 一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
7 
4 
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鹿 些 <?xml version="1.0" encoding="UTF-8"?> 


- <poetry> 
<head> 雇 人 牺 </head> 
王 维 <author> 王 维 </author> 
<content> 空 山 不 见 人 ， 但 闻 人 语 响 。</content> 
<content> 迟 影 入 深 林 ， 复 照 青苔 上 。</content> 
衬 山 不 见 人 人， 得 辐 信 语 响 。 </poetry> 


返 影 入 深 林 ， 复 照 青 首 上 。 


图 16.3 通过 外 部 CSS 样式 表 控 制 XML 文档 效果 图 16.4 无 CSS 的 XML 文档 效果 
16.2 案例 实战 


本 节 将 通过 案例 的 形式 帮助 读者 使 用 CSS 设计 XML 文档 样式 ， 以 提高 实战 技法 和 技巧 ,快速 理 


| 解 CSS 在 XML 中 的 应 用 。 


16.2.1 设计 特效 文字 


本 节 案 例 介绍 如 何 使 用 CSS 定位 技术 设计 一 个 文字 阴影 特效 ， 如 图 16.5 所 示 。 


Oo- wa sles "CM 


图 16.5 设计 XML 文字 特效 


【操作 步骤 】 
第 1 步 ， 新 建 XML 文档 ， 保 存 为 index.xml。 
第 2 步 ， 与 使 用 HIML 制作 文字 阴影 效果 的 思路 基本 一 致 ， 用 两 个 标记 分 别 记录 两 段 相 同 的 文 


” 字 ，XML 文档 代码 如 下 ; 


<?xml version="1.0" encoding="utf-8"?> 
<shadow> 
<charl> 春 虐 不 觉 晓 ， 处 处 闻 啼 鸟 。</charl> 
<char2> 春 眠 不 觉 晓 ， 处 处 闻 啼 鸟 。</char2> 
</shadow> 


第 3 步 ， 新 建 CSS 样式 表 文 件 ， 保 存 为 style.css。 
第 4 步 ， 输 入 下 面 样式 代码 。 
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shadow { 
font-famlly: Anial; 
font-size: 80px; 
font-weight: bold; 
} 
charl { 
position: absolute: 谍 绝 对 定位 */ 
color: #FFFFO0O: JNote 
top: 10px; 
left: 1Spx: 
z-index: 2: /# 高 低 关 系 #/ 
border: 2px solid 埠 22; 
padding: Spx 10px Spx 10px: 


char2 { 
position: absolute: 谍 绝 对 定位 */ 
top: 13px; 
left: 20px: 
color: #ff0000: 
z-index: ]: /# 高 低 关 系 #/ 


padding: Spx 10px Spx 10px; 
background-color: #7c0000:; 


} 


第 5 步 ， 在 index.xml 文档 头 部 位 置 ， 即 第 2 行 位 置 ， 使 用 <?xml-styleshee 人 命令 导入 外 部 样式 表 
文件 style.css， 即 可 完成 本 例 效 果 。 


< ?xml-stylesheet type= "text/css" href—"style.css"?> 


16.2.2 设计 表格 样式 
本 节 案例 介绍 如 何 使 用 CSS 设计 XML 以 表格 样式 显示 数据 ， 并 隔行 换 色 ， 效 果 如 图 16.6 所 示 。 


xX 


CE 中 -| 大 htpy/locaho.. ~ B 0 | @& localhost x 介 


定义 表格 中 的 表 注 内 容 《地 注 》。 
<COl> 定义 表格 中 一 个 或 多 个 列 的 属性 值 。 
<COIgroup> 定义 表格 中 供 格 式 化 的 列 组 。 


© 
示 题 。 
> 定 ' 上 写 7 p 
"1 。 
td> 定义 表格 中 的 单元 。 
~ J 圭 ?1 此 
o 
安 。 


图 16.6 设计 表格 显示 样式 


【操作 步骤 】 
第 1 步 ， 新 建 XML 文档 ， 保 存 为 index.xml。 


广 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
i 
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| 
| 第 2 步 ， 设 计 XML 文档 结构 。 使 用 <list> 定 义 表格 框 ， 使 用 <caption> 定 义 表 头 ， 使 用 <titte> 定 义 列 
标题 行 ， 使 用 <item> 定 义 数据 行 ， 使 用 <name> 定 义 第 1 列 单元 格 ， 使 用 <describe> 定 义 第 2 列 单元 格 。 
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第 3 步 ， 新 建 CSS 样式 表 文 件 ， 保存 为 style.css。 


第 4 步 ， 输 入 下 面 样式 代码 。 


list { 


} 


font-family: Arial; 
font-slze: 14px: 
position: absolute: 
top: 0pX; 

left: Opx: 
padding: 4px:; 


caption { 


} 
title 


} 


margin-bottom: 6px; 
font-welght: bold; 
font-size: 1.4em: 
text-align:center; 
display: block: 


{ 
background-color: #4bactf: 


display: block:; 

border: 1px solid #0058a3; 
margin-bottom: -1px:; 
padding: 4px Opx 4px Opx:; 
font-weight:bold; 


item { 


} 


display: block: 
background-color: #eafSff: 
border: 1px solid #0058a3; 
margin-bottom: -1px:; 
padding: 4px Opx 4px Opx; 


item:nth-child(2n+1) { 


} 


backeground-color: #eee: 


name, describe { 


} 


padding: 2px 8px 2px 8px; 
display: inline-block:; 


name { 


width: 100px;} 


describe {width: 300px:} 
第 5 步 ， 在 index.xml 文档 头 部 位 置 ， 即 第 2 行 位 置 ， 使 用 <?xml-styleshee 人 > 命令 导入 外 部 样式 表 


谍 绝 对 定位 */ 


此 适当 地 调整 位 置 */ 


谍 块 元 素 */ 


旋 块 元 素 */ 
诺 边 框 */ 
片 解决 边框 重合 的 问题 */ 


谍 块 元 素 */ 

/# 背 景色 所 

谍 边 框 */ 

谍 解 决 边框 重合 的 问题 */ 

/*Firefox 不 支持 行内 元 素 的 padding,， 只 支持 block 元 素 的 padding, 为 了 尺 


量 统一 两 个 浏览 器 ， 将 padding-top 和 bottom 放 到 这 里 设置 */ 


话 背 景色 */ 


/*Firefox 不 文 持 行内 元 素 的 width 属性 */ 


文件 style.css， 即 可 完成 本 例 效 果 。 


<?xml-stylesheet type="text/css" href—"style.css"?> 
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Re 16.2.3 ”设计 图 文 页 面 


本 案例 设计 一 个 图 文 并 成 的 证 配 男 效 果 ， 在 页 面 中 通过 夕阳 背景 衬托 意境 ， 通 过 CSS 骨 入 的 诗 
”人 速写 给 画面 以 点 睛 ， 并 在 背景 图 的 左上 角 显 示 一 首 唐 代 诗 人 李商隐 的 《 登 乐 游 原 》 小 诗 ， 使 页 面 看 
起 来 更 定 诗 情 画 意 ， 设 计 效 果 如 图 16.7 所 示 。 


Ce (+)- |@ http://localhost:8080/mysite/15.2 ~ 


图 16.7 设计 诗情画意 图 文 效果 


【操作 步骤 】 
第 1 步 ， 构 建 XML 文档 结构 ， 并 保存 为 index.xml。 


<?xml version="1.0" encoding="utf-8"?> 


<title> 登 乐 游 原 </title> 
<author> 唐 李商隐 </author> 
<Wen> 
<] 谊 同 晚 意 不 适 ，</li> 
<]> 驱 车 登 古 原 。</li> 
| <]li> 夕 阳 无 限 好 ，</li> 
] <li> 只 是 近 黄 昏 。</i> 
| </wen> 
</poem> 


第 2 步 ， 新 建 CSS 样式 表 文件 ， 保 存 为 xml.css。 在 样式 表 文 件 中 定义 XML 文档 中 各 个 标签 的 
' 基本 显示 样式 。 


poem { /* 夯 面 样式 */ 
margin:Opx; 
background-image:url(06.jpg);” 必 设计 画面 背景 图 */ 


二 { * 标 题 样式 */ 
position:absolute: 
left:80px; 
top:20px; 
font-size:26px; 
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color:#FFF: 
font-weight:bold: 


} 

author { /* 作 者 样式 */ 
position:absolute: 
left: 1 00px; 
top:60px; 
font-size:14px: 
color:#0033FF: 


} 

wen { /* 诗 文 外 包含 框 样式 */ 
position:absolute:; 
left:80px: 
top:90px:; 


} 

li fp# 诗 文 列表 样式 所 
display:block: 
color:#000:; 
font-size:20px:; 
font-weight:bold; 
margin:6px; 

} 


第 3 步 ， 使 用 CSS 在 文档 中 先入 诗人 画像 ， 并 通过 width 和 height 属性 定义 诗 文 外 包含 框 的 大 小 ，， 


并 用 background 属性 定位 值 bottom 和 right 把 赎 入 的 诗人 男 像 定 位 到 包含 框 的 在 下 角 。 
Wen { 
WwWldth:620Ppx: 
helght:3S0pX: 
background:url(author.png) bottom right no-repeat : 
} 


16.2.4 设计 正文 版 面 


图 文 混 排 多 用 于 正文 内 容 部 分 或 者 新 闻 内 容 部 分 ,处理 的 方式 也 很 简单 ,文字 一 般 围绕 在 图 片 的 


一 侧 ， 或 者 四 周 。 这 样 的 设计 可 以 让 整个 版 面 显得 饱满 ， 又 不 杂乱 。 为 了 获取 较 高 的 代码 可 移植 性 ， 
要 求 使 用 XML+CSS 方式 来 实现 。 


图 文 混 排 版 式 一 般 情况 下 不 是 在 页 面 设计 过 程 中 实现 的 , 而 是 在 后 期 通过 网 站 的 新 闻 发 布 系统 进 


行 目 动 发 布 ， 这 样 的 内 容 发 布 模式 对 于 图 片 的 大 小 、 段 落 文本 排版 都 属于 不 可 控 的 范围 ， 因 此 要 考虑 
图 与 文 不 规则 问题 。 


使 用 绝对 定位 方式 后 , 图 片 将 脱离 文档 流 , 成 为 页 面 中 具有 层 登 效果 的 一 个 元 素 , 将 会 覆盖 文字 ， 
因此 不 建议 使 用 绝对 定位 实现 图 文 混 排 。 通 过 浮动 设计 图 文 混 排 是 比较 理想 的 方式 ， 适 当 利用 补 白 ， 


(padding) 或 者 文字 缩 进 〈textrindent) 的 方式 将 被 图 片 与 文字 分 开 。 本 例 设 计 效 果 如 图 16.8 所 示 。 
【操作 步骤 】 
第 1 步 ， 构 建 XML 文档 结构 ， 并 保存 为 index.xml。 
<?xml version="1.0" encoding="gb2312"?7> 


<?xml-stylesheet type="text/css" href="i1mages/xml.css"?> 
<new> 
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<hl> 月 活 4 亿 “市 值 仅 次 于 腾讯 “保值 力 压 苹果 ” 逆 天 的 美 图 却 遭 变现 困难 <h1> 
<detall> 
<time> 发 布 时 间 : 2016.10.00 00:00</time> 
<from> 来 源 : Eastland</from> 
</detall> 
<plc> 
<i1mg></img> 
<title> 美 图 人 物 </title> 
</pic> 
<p> 今 年 8 月 22 日 ， 美 图 招股 文件 在 香港 交易 所 官网 亮相 。 文 件 披露 : 2016 年 6 月 美 图 旗下 App 的 月 
活用 户 达 到 4.46 亿 ; 在 主流 社交 网 站 分 享 的 照片 中 ，53.5% 经 过 美 图 处 理 。</p> 
<p> 随 着 美 图 挂牌 日 期 的 临近 ， 一 些 “ 有 意思 ”的 信息 悄然 流传 。</p> 
<p> 比 如 ， 美 图 市 值 将 超过 400 亿 港 元 ， 成 为 “香港 主板 市 值 仅 次 于 腾讯 的 互联 网 企业 ”。 截至 2016 年 9 月 
底 ， 香 港 主板 1930 家 公司 总 市 值 25.6 万 亿 港 元 ， 其 中 腾讯 市 值 超过 2 万 亿 港 元 ， 占 整个 主板 市 值 的 7.9%。</p> 
<p> 还 有 一 则 新 闻 说 美 图 M6 上 市 4 个 月 后 “ 仍 是 一 机 难 求 ， 洲 价 幅度 赶 iPhone7”、“ 最 保值 手机 不 是 
人 苹果、 三星 而 是 美 图 手机 !”</p> 
<p> 市 值 拿 腾讯 说 事 儿 ,“ 畅 销 、 保 值 ” 用 苹果 、 三 星 “ 垫 背 ”， 美 图 的 标杆 (benchmark) 令 人 敬 苦 。</p> 
<p> 美 图 很 好 用 ， 但 研发 出 好 应 用 的 公司 效益 不 一 定 就 好 ，4.5 亿 用 户 、 市 值 仅 次 于 腾讯 、 保 值 力 压 苹 
果 终 究 不 过 是 “喷头 ”。</p> 


</new> 


| 一 四- 大 http://localhost 8080/mysite/index.xml - 国 @ | Elocalhost 


月 活 4 亿 、“ 市 值 仅 次 于 腾讯 ”、“ 保 值 力 压 苹果 ”， 道 天 的 美 图 却 
遗 变现 困难 


发 布 时 间 : 2016. 10. 00 00:00 ”来 源 : Eastland 


今年 8 月 22 日 ， 美 图 招股 文件 在 香港 交易 所 官网 亮相 。 文 忻 披露 ，2016 年 6 月 美 
图 旗下 App 的 月 活用 户 达到 4. 46 亿 ; 在 主流 社交 网 站 分 享 的 照片 中 ，53. 5% 双 过 美 图 
处 理 。 

随 着 美 图 挂牌 日 期 的 临近 ,一 些 “ 有 意思 ”的 信息 悄然 流传 。 

比如 ， 美 图 市 值 将 起 过 400 亿 港元 ， 成 为 “香港 主板 市 值 避 次 于 腾讯 的 互 防 网 企 
业 ”。 截 至 ?016 年 9 月 庶 ， 和 再 港 主板 1930 家 公司 总 市 值 235. 6 帮 忆 港元 ， 其 中 腾讯 市 值 
超过 2 万 亿 港 元 ， 目 整个 主板 市 值 的 7. 9%。 

还 有 一 则 新 闻 说 美 图 W6 上 市 4 个 月 后 “和 仍 是 一 机 难 求 ， 湛 惟 幅 度 赶 iPhone7”、 
“最 保值 手机 不 是 苹果 、 三 呈 而 是 美 图 手机 ! ” 

市 慎重 腾讯 说 事 儿 ，“ 电 销 、 保 值 ”用 苹 里 、 三 星 “ 垫 背 ”， 美 图 的 标杆 

NN : :全 fbenchmark) 今 作 绕 民 。 

美 图 很 好 用 ， 和 但 研发 出 好 应 用 的 公司 效益 不 一 定 就 好 ，4. 5 亿 用 户 、 市 值 仅 次 于 

腾讯 、 保 值 力 压 芋 果 终究 不 过 是 “ 嘱 头 ”。 


16.8 ”设计 正文 版 面 效 果 


整个 结构 包含 在 <new> 新 闻 框 中 ， 新 闻 框 中 包含 4 部 分 ， 第 1 部 分 是 新 闻 标 题 ， 由 <h1> 标 题 标 签 
负责 ; 第 2 部 分 是 新 闻 的 附加 信息 ， 由 <detail> 标 签 负 责 管理 ， 包 括 发 布 时 间 标 签 <ime> 和 新 闻 源 自 
标签 <fom>; 第 3 部 分 是 新 闻 图 片 ， 由 <pic> 图 片 框 负 责 控 制 ， 其 中 包含 <img> 标 签 ， 负 责 显示 图 片 ， 
<title> 标 签 ， 负 责 注释 图 片 ， 第 4 部 分 是 新 闻 正 文部 分 ， 由 <p> 标 签 负 责 管理 。 

第 2 步 ， 新 建 CSS 样式 表 文件 ， 保 存 为 xmlcss。 在 样式 表 文 件 中 定义 XML 文档 中 各 个 标签 的 
基本 显示 样式 。 先 输入 下 面 样式 ， 定 义 新 闻 框 显示 效果 。 

new { 


display:block:; 
width:900px; * 控 制 内 容 区 域 的 宽度 ， 根 据 实际 情况 考虑 ， 也 可 以 不 需要 */ 
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| 
人 一 
| 
| 
| 


第 3 步 ， 继 续 添加 样式 。 设 计 新 闻 标题 样式 ， 其 中 包括 3 级 标题 ， 统 一 标题 为 居中 显示 对 齐 , 一 ， 
级 标题 字体 大 小 为 28px，<detail> 标 签字 体 大 小 为 4px，<title> 标 签字 体 大 小 为 12px， 同 时 <title> 标 
签 标 题 取消 默认 的 上 下 边界 样式 。 

| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


第 4 步 ， 设 计 新 闻 图 片 框 和 图 片 样式 。 设 计 新 闻 图 片 框 向 左 浮动 ， 然 后 定义 新 闻 图 片 大 小 固定 ，， 
并 适当 拉 开 与 环绕 的 文字 之 间 的 距离 。 


| 
~ 
~ 


第 5 步 ， 设 计 段落 文本 样式 ， 主 要 包括 段落 文本 的 首 行 缩 进 和 行 高 


~、 
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line-height: 1.8em; 

text-Iindent:2em: 
} 
会 | 简单 的 几 句 CSS 样式 代码 就 能 实现 图 文 混 排 的 页 面 效 果 。 其 中 重点 内 容 是 将 图 片 设 置 为 浮动 ， 
一 :一 float:left 就 是 将 图 片 同 左 浮动 ， 那 么 ， 如 果 设 置 为 float:right 将 会 是 什么 效果 呢 ? 读者 可 以 修改 代码 
Note 并 在 浏览 器 中 查看 页 面 效 果 。 


16.3 在 线 练 习 


本 节 专 题 练 习 文 档 对 象 模型 开发 的 一 般 方法 ， 感 兴趣 的 读者 可 以 扫 码 练习 。 
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综合 实战 : 设计 响应 式 网 站 


随 着 各 种 智能 设备 的 推广 和 普及 ,网 站 的 建设 者 需要 满足 访问 者 通过 智能 手机 、 平 板 电 
脑 、 揭 记 本 电脑 、 台 式 机 、 电 视 机 ， 以 及 未 来 任何 可 以 上 网 的 设备 获取 信息 的 需求 。 响 应 式 
Web 设计 就 是 为 此 诞生 的 .本 章 将 通过 一 个 综合 案例 讲解 如 何 构 建 在 各 种 设备 上 都 能 正常 工 


作 的 网 站 ， 它 能 根据 设备 的 功能 和 特征 对 布局 进行 调整 。 


【 学 习 重 点 】 
创建 可 伸缩 图 像 。 

| 创建 弹性 布局 网 格 。 
W|I 理解 和 实现 媒体 查询 。 


Note 
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17.1 认识 响应 式 Web 设计 


网 站 设计 主要 有 两 大 类 型 : 固定 宽度 和 啊 应 式 。 

对 于 固定 (fixed) 布局 ， 整 个 页 面 和 每 一 栏 都 有 基于 像素 的 宽度 。 顾 名 思 义 ， 无 论 是 使 用 移动 电话 
和 平板 电脑 等 较 小 的 设备 查看 页 面 ， 还 是 使 用 桌面 浏览 器 并 对 窗口 进行 缩小 ， 它 的 宽度 都 不 会 改变 。 在 
引入 啊 应 式 Web 设计 之 前 ， 这 是 大 多 数 网 站 选用 的 布局 方式 ， 也 是 学 习 CSS 时 最 容易 掌握 的 布局 方式 。 

啊 应 式 页 面 也 称 为 流 式 (fluid 或 liquid) 页 面 ， 它 使 用 百分数 定义 宽度 ， 人 允许 页 面 随 显示 环境 的 
改变 进行 放大 或 缩小 。 除 了 具有 流动 栏 ， 啊 应 式 页 面 还 可 以 根据 屏幕 尺寸 以 特定 方式 调整 其 设计 。 例 
如 ， 可 以 更 改 图 像 大 小 或 者 调整 每 一 栏 ， 使 其 大 小 更 合适 。 这 就 可 以 在 使 用 相同 HTML 的 情况 下 ， 
为 移动 用 户 、 平 板 电脑 用 户 和 昌 面 用 户 定制 单独 的 体验 ， 而 不 是 提供 3 个 独立 的 网 站 。 

没有 一 种 布局 方式 可 以 适用 于 所 有 的 情景 。 不 过 ， 随 着 智能 手机 和 平板 电脑 的 广泛 应 用 ， 未 来 一 
定 还 会 出 现 各 种 不 同 尺 寸 的 智能 设备 ， 因 此 在 设计 网 页 时 有 必要 将 网 站 做 成 啊 应 式 布局 。 这 也 是 每 天 
都 有 大 量 啊 应 式 网 站 出 现 的 原因 。 

【拓展 】 

啊 应 式 Web 设计 起 源 于 Ethan Marcotte， 他 创建 了 术语 “ 啊 应 式 Web 设计 ”(Responsive Web 
Design)， 并 向 大 家 介绍 了 创建 啊 应 式 网 站 的 技术 。 人 们 首次 广泛 关注 这 种 方法 始 于 他 发 表 在 4 List 
Apart 上 的 文章 (www.alistapart.com/articles/responsive-web-design/)。 他 在 Responsive Web Desien 一 书 
中 对 此 做 了 更 为 深入 细致 的 探讨 。 

Ethan Marcotte 的 方法 包含 以 下 3 点 。 

灵活 的 图 像 和 媒体 ,图 像 和 媒体 资源 的 尺寸 是 用 百分数 定义 的 , 从 而 可 以 根据 环境 进行 缩放 。 

灵活 的 、 基 于 网 格 的 布局 ， 也 就 是 流 式 布局 。 对 于 啊 应 式 网 站 ， 所 有 的 width 属性 都 用 百 分 

数 设 定 ， 因 此 所 有 的 布局 成 分 都 是 相对 的 。 其 他 水 平 属性 通常 也 会 使 用 相对 单位 (如 em、 
百分数 和 rem 等 ) 。 

媒体 查询 。 使 用 这 项 技术 ， 可 以 根据 媒体 特征 (如 浏览 器 可 视 页 面 区 域 的 宽度 ) 对 设计 进行 

调整 。 

John Allsopp 于 2000 年 发 表 《Web 设计 之 道 》(4 Dao of Web Design，http://alistapart.com/article/dao)， 
该 文 讨论 了 设计 和 构建 灵活 的 网 站 的 方法 。 这 篇 文章 是 啊 应 式 Web 设计 的 先驱 ，Marcotte 以 及 很 多 
其 他 作者 都 引用 过 这 篇 文章 ， 影 响 巨 大 。Jeremy Keith 在 题 为 One Web 的 演讲 中 归纳 了 “一 个 网 站 适 
应 所 有 设备 ”的 方法 。 

【参考 】 

Screen Sizes 网 站 (http://screensiz.es 提供 了 流行 设备 与 显示 屏 的 分 辨 率 和 设备 宽度 信息 ， 使 用 
媒体 查询 时 ， 这 些 信 息 很 有 用 。 

Maximiliano Firtman 维护 了 一 个 现代 移动 设备 对 HTML5 和 CSS3 文 持 情况 的 表格 (参考 
http:/mobilehtmls.org)， 其 中 大 量 信息 属于 HTML5 高 级 特性 。 


17.2 构建 页 面 


高 效 网 页 的 核心 是 结构 良好 、 语 义 化 的 HTML。 下 面 就 来 具体 介绍 如 何 构 建 本 章 案 例 的 具体 结构 。 
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【操作 步骤 】 
第 1 步 ， 恰 当地 使 用 article、aside、nav、section、header、footer 和 div 等 元 素 将 页 面 划 分 成 不 
同 的 逻辑 区 块 。 本 例 创建 了 一 个 虚构 博客 ， 页 面 结构 要 点 说 明 如 下 : 
使 用 3 个 div， 其 中 一 个 将 整个 页 面包 起 来 ， 另 外 两 个 将 两 部 分 主体 内 容 区 域 包 起 来 ， 以 便 
应 用 样式 设计 。 
用 作 报 头 的 header， 包 括 标识 、 社 交 媒 体 网 站 链接 和 主导 航 。 
划分 为 多 个 博客 条 目 section 元 素 的 main 元 素 ， 其 中 每 个 section 元 素 都 有 自己 的 页 脚 。 


附注 栏 div (同时 使 用 了 article 和 aside)， 提 供 关 于 博客 作者 和 右 栏 (应 用 CSS 之 后 就 有 了 ) | 


博客 条 目的 链接 。 
页 面 级 footer 元 素 ， 包 含 版 权 信 息 等 内 容 。 


第 2 步 ， 按 照 一 定 的 顺序 放置 内 容 ， 确 保 页 面 在 不 使 用 CSS 的 情况 下 也 是 合理 的 。 例 如 ， 首 先 ， 


是 报头 ， 接 着 是 主体 内 容 ， 然 后 是 一 个 或 多 个 附注 栏 ， 最 后 是 页 面 级 的 页 脚 。 将 最 重要 的 内 容 放 在 最 ， 
上 面 ， 对 于 智能 手机 和 平板 电脑 等 小 屏幕 用 户 来 说 ， 不 用 滑动 屏幕 太 远 就 能 获取 主体 内 容 。 此 外 , 搜 ， 


索引 擎 “看 到 ”的 页 面 也 类 似 于 未 应 用 CSS 的 页 面 ， 因 此 ， 如 果 将 主体 内 容 提 前 ， 搜 索引 擎 就 能 
好 地 对 网 站 进行 索引 。 这 同样 也 会 让 屏幕 阅读 器 用 户 受 瘟 。 


第 3 步 ， 以 一 致 的 方式 使 用 标题 元 素 (h1~h6)， 从 而 明确 地 标识 页 面 上 这 些 区 块 的 信息 ， 并 对 


它们 按 优 先 级 排序 。 
第 4 步 ， 使 用 合适 的 语义 标记 剩余 的 内 容 ， 如 段落 、 图 和 列表 。 


第 5 步 ， 如 果 有 必要 ， 使 用 注释 来 标识 页 面 上 不 同 的 区 域 及 其 内 容 。 根 据 个 人 习惯 ， 选 用 一 种 不 ， 


同 的 注释 格式 标记 区 块 的 开始 《〈 而 非 结 束 )。 
页 面 基本 框架 结构 代码 如 下 : 


<div class="page"> 
<!-- 开始 报头 
<header class="masthead" role= "banner "> 
<p class="logo"><a href="/"><1mg /></a></p> 
<ul class="social-sites">[ 社 交 图 片 链接 ]</ul> 
<nav role="navigation">[ 主 导航 链接 列表 ]</nav> 
</header> 
<!-- 结 束 报头 --> 
<div class="container"> 
<!-- 开始 主体 内 容 一 一 --> 
<main role="main"> 
<section class="post"> 
<h1>[ 文 章 标题 ]</h1> 
<Img class="post-photo-full" /> 
<div class="post-blurb"> 
<p>[ 正 文 内 容 ]</p> 
</div> 
<footer class="footer">[ 博 客 条 目 页 脚 ]</footer> 
</section> 
<section class="post"> 
<h1>[ 文 章 标题 ]</h1> 
<img class="post-photo" /> 
<div class="post-blurb"> 
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<p>[ 正 文 内 容 ]</p> 
</div> 
<footer class="footer">[ 博 客 条 目 页 脚 ]</footer> 
</section> 
<nav role="navigation"> 
<ol class="pagination">[ 链 接 列 表 项 ]</ol> 
</nav> 
</main> 
<!-- 结 束 主体 内 容 --> 
<!- 开始 附注 栏 一 一 --> 
<div class="sidebar"> 
<article class="about"> 
<h2> 关 于 自己 </h2> 
</article> 
<div class="mod"> 
<h2> 我 的 经 历 </h2> 
. [映射 图 像 ] .… </div> 
<aside class="mod"> 
<h2> 热 门 职位 </h2> 
<ul class="links">[ 链 接 列 表 项 ]<mul> 
</aside> 
<aside class="mod"> 
<h2> 最 近 分 享 </h2> 
<ul class="links">[ 链 接 列 表 项 ]</ul> 
</aside> 
</div> 
<!-- 结 束 附注 栏 --> 
</div> 
<!-- 结 束 容器 --> 
<!-- 一 一 开始 页 脚 一 一 --> 
<footer role="contentinfo" class="footer"> 
<p class="legal"><small>[ 版 权 信息 ]</small></p> 
</footer> 
<!-- 结 束 页 脚 --> 
</div> 
<1-- 结 束 页 面 --> 


在 上 面 的 结构 中 ， 使 用 section 元 素来 标记 每 个 包含 部 分 博文 的 条 目 。 如 果 它 们 是 完整 的 博文 条 


， 目 , 就 应 该 使 用 article 来 标记 , 例如 , 在 单独 的 、 完 整 的 博客 文章 页 内 。 对 它们 使 用 article 替代 section 
”也 可 以 ， 只 要 代表 这 一 段 代码 可 以 成 为 独立 的 内 容 即 可 。 


第 6 步 ， 保 存 文档 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 17.1 所 示 。 这 个 页 面 是 一 栏 的 ， 除 了 浏 


览 器 默认 样式 以 外 并 没有 设置 其 他 样式 。 由 于 它 的 语义 结构 非常 好 , 因此 页 面 是 完全 可 用 且 可 理解 的 。 
| < 搓 注意 : 不 一 定 要 在 应 用 CSS 之 前 就 标记 好 整个 页 面 。 实 践 中 ， 很 少 先 将 一 个 区 块 的 HIML 写 


好 ， 再 为 其 编写 一 些 或 全 部 的 CSS， 然 后 对 下 一 个 区 块 重 复 这 一 过 程 。 处 理 方式 取决 于 个 
人 习惯 。 
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图 17.1 页 面 结构 默 认 显 示 效 果 


17.3 设计 基本 样式 


构建 并 完善 页 面 结 构 和 内 容 之 后 ， 下 面 就 来 重点 介绍 网 页 样式 的 设计 。 
写 提示 : 在 学 习 之 前 ， 读 者 应 该 有 一 定 的 CSS 基础 ， 没 有 基础 的 建议 先 阅读 小 白手 册 ， 等 入 门 后 
再 接着 学 习 。 


17.3.1 兼容 早期 浏览 


现代 浏览 器 原生 支持 HTMLS5 新 增 结构 元 素 。 从 样式 的 角度 来 说 ,这 意味 着 浏览 器 将 为 这 些 新 的 
元 素 应 用 默认 样式 。 例 如 ，article、footer、header、nav 以 及 其 他 一 些 元 素 显 示 为 单独 的 行 ， 就 像 div、 


blockquote、Pp 以 及 其 他 元 素 在 HIMLS 之 前 的 版 本 中 称 作 块 级 元 素 。 
【操作 步骤 】 
第 1 步 ， 大 部 分 浏览 器 允许 对 它们 并 不 原生 支持 的 元 素 添加 样式 ， 样 式 代码 如 下 : 
article, aside, figcaption, figure, footer, header, main, nav, section { 
display: block: 


大 多 数 浏览 器 夭 认 将 它们 无 法 识别 的 元 素 作为 行内 元 素 处 理 。 因 此 , 这 一 小 段 CSS 将 强制 HTML5 ， 


新 语义 元 素 显 示 在 单独 的 行 。 
会 提示 : 如 果 使 用 CSS 重 置 或 normalize.css， 可 以 跳 过 这 一 步 ， 它 们 会 包含 这 里 的 代码 。 
第 2 步 ， 大 部 分 浏览 器 会 忽略 它们 不 原生 文 持 的 元 素 的 CSS。HTMLS shiv 是 专门 用 于 解决 这 一 


问题 的 一 段 JavaScript。 在 每 个 页 面 的 head 元 素 〈 注 意 不 是 header 元 素 ) 中 添加 下 面 的 代码 ， 实 现在 
IE9 之 前 的 正 中 为 新 的 HIMLS 元 素 设 置 样式 。 


<!--[EltIE 9]> 
<script src="]Js/html$shiv.]s"></script> 
<![endif]--> 
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_ 17.3.2， 重 置 默认 样式 


每 个 浏览 器 都 有 内 置 的 默认 样式 表 ，HTML 会 遵照 该 样式 表 显 示 网 页 。 整体 上 ,不同 浏览 器 提供 


”的 默认 样式 表 是 相似 的 ， 但 也 存在 一 定 的 差异 。 为 此 ， 开 发 人 员 在 应 用 他 们 自己 的 CSS 之 前 ， 常 党 


需要 抹 平 这 些 差异 。 抹 平 差异 的 方法 主要 有 两 种 。 
使 用 CSS 重 置 (reset) 样式 表 ， 如 Eric Meyer 创建 的 Meyer 重 置 (http://meyerweb.com/eric/ 
tools/css/reset/) 。 男 外 还 有 其 他 的 一 些 重 置 样式 表 。 
加 ”使 用 Nicolas Gallagher 和 Jonathan Neal 创建 的 normalize.css 开始 主 样式 表 。 该 样式 表 位 于 


http://necolas.github.com/normalize.css/。 


CSS 重 置 可 以 有 效 地 将 所 有 默认 样式 都 设 为 “ 零 ”。 第 二 种 方法 ， 即 使 用 normalize.css， 则 采取 


“了 不 同 的 方式 。 它 并 非 对 所 有 样式 进行 重 置 ， 而 是 对 默认 样式 进行 微调 ， 这 样 确保 在 不 同 的 浏览 器 中 
”具有 相似 的 外 观 。 


用 户 也 可 以 保留 浏览 器 的 默认 样式 ， 并 上 自己 编写 相应 的 CSS。 如 果 确 实 要 使 用 normalize.css 或 


CSS 重 置 ， 也 不 必 保 留 它 们 提供 的 所 有 CSS。 本 例 使 用 了 normalize.css 中 的 一 部 分 代码 ， 并 对 文本 添 
加 了 一 些 样式 ， 形 成 一 个 初始 的 页 面 。 


虑 在 方向 更 改 后 防止 1OS 文本 大 小 调整 ， 而 不 禁用 用 户 缩放 */ 
html { 

-ns-text-size-adjust: 100%; 

-webkit-text-size-adjust: 100%; 


} 
上 诺 删 除 上 默认 边 距 */ 


上 # 链 接 样式 中 ， 解 决 Chrome 与 其 他 浏览 器 之 间 的 outline 不 一 致 问 题 */ 
a:focus {outline: thin dotted:} 

a:active, a:hover {outline: 0;} 

此 在 所 有 浏览 器 中 解决 不 一 致 和 可 变 的 字体 大 小 */ 

simall {font-size: 80%;} 

/# 在 正 8/9 中 的 a 元 素 中 删除 边框 */ 


Img {border: 0;} 
17.4 设计 响应 式样 式 
17.3 节 介 绍 了 网 页 基本 样式 的 设计 ， 当 然 限 于 篇 幅 ， 我 们 没有 面面俱到 ， 读 者 可 以 参考 示例 源 代 


码 ， 了 解 更 详细 的 样式 代码 。 下 面 重 点 介绍 页 面 的 啊 应 式样 式 设 计 过 程 。 
17.4.1 创建 可 伸缩 图 像 


在 默认 情况 下 ， 图 像 显 示 的 尺寸 是 HTML 中 指定 的 width 和 height 属性 值 。 如 果 不 指 定 这 些 属 


”性 值 ， 图 像 就 会 自动 按照 其 原始 尺寸 显示 。 此 外 ， 可 以 通过 CSS 以 像素 为 单位 设置 width 和 height。 
”显然 ， 当 屏幕 宽度 有 限时 ， 按 原始 尺寸 显示 图 像 就 不 一 定 合适 了 。 使 用 可 伸缩 图 像 技 术 ， 就 可 以 让 图 
| 像 在 可 用 空间 内 缩放 ， 但 不 会 超过 其 本 来 的 宽度 。 
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为 图 像 添 加 如 下 类 样式 : 
.post-photo,.post-photo-full { 
max-width: 100%;: 
} 
这 样 可 伸缩 图 像 可 以 根据 包含 它们 的 元 素 〈( 本 例 为 body)〉 的 尺寸 按 比 例 缩放 。 
一 定 要 使 用 max-width: 100% 而 不 是 width: 100%。 虽 然 二 者 都 能 让 图 像 在 容器 内 缩放 ， 但 是 width: 


100% 会 让 图 像 尽 可 能 地 填充 容器 ， 如 果 容 器 的 宽度 比 图 像 宽 ， 图 像 就 会 放大 到 超过 其 本 来 尺寸 ， 有 ， 


可 能 会 显得 较为 难看 。 


上 面 样式 对 已 经 为 Retina 显示 屏 扩大 到 双 倍 大 小 的 图 像 也 适用 。 当 然 , 双 倍 分 辩 率 的 图 像 的 文件 ， 


大 小 也 会 大 很 多 。 


可 以 使 用 background-size 属性 对 背景 图 像 进行 缩放 (对 下 8 无 效 )。 更 多 信息 参见 www.css3.info/ | 


preview/background-size/。 


会 提示 : 还 可 以 使 用 video, embed, object{max-width: 100%:} 让 HTMLS 视频 及 其 他 媒体 变 成 可 伸缩 | 


的 (同样 也 不 要 在 HTML 中 为 它们 指定 width 和 height) 。 


17.4.2 创建 弹性 布局 网 格 


创建 弹性 布局 需要 使 用 百分数 宽度 ， 并 将 它们 应 用 于 页 面 里 的 主要 区 域 。 
width: percentage; 


其 中 percentage 表示 希望 元 素 在 水 平方 旬 上 占据 容器 空间 的 比例 ,一 般 不 必 设 置 “width: 100%;”， / 


因为 默认 设置 为 “display:block: 的 元 素 ， 如 P 以 及 其 他 很 多 元 素 ， 或 手动 设置 为 “display: Ma 
的 元 素 在 默认 情况 下 会 占据 整个 可 用 空间 。 


作为 可 选 的 一 步 ， 对 包含 整个 页 面 内 容 的 元 素 设 置 “max-width: value:”， 其 中 value 表示 希望 页 面 / 
最 多 可 增加 到 的 最 大 宽度 。 通常 ,value 以 像素 为 单位 , 不 过 也 可 以 使 用 百分数 、em 值 或 其 他 单位 的 值 。 
还 可 以 对 元 素 设置 基于 百分数 的 margin 和 padding 值 .在 本 例 页 面 中 , 对 这 些 属性 使 用 的 是 em 值 ， 


这 是 一 种 常见 的 做 法 。 内 边 距 和 外 边 距 的 em 值 相 对 于 元 素 的 fontsize。 例 如 ， 如 果 其 字体 大 小 等 价 于 ， 


14px， 则 “width:10em:” 会 将 宽度 设置 为 140px。 而 基于 百分数 的 值 则 是 相对 于 包含 元 素 的 容器 的 。 


对 于 设置 了 body {font-size: 100%;} 的 页 面 ， 对 font-size、margin、padding 和 max-width 使 用 em | 


值 还 有 一 个 好 处 : 如 果 用 户 更 改 了 浏览 器 默认 字体 大 小 ， 那 么 页 面 也 会 跟着 变 大 或 变 小 。 


< 注意 : 将 box-sizing 属性 设置 为 borderbox， 就 可 以 很 方便 地 对 拥有 水 平方 向 内 边 距 (使 用 em 或 
其 他 的 单位 ) 的 元 素 定 义 宽度 ， 而 不 必 进 行 复杂 的 数学 计算 来 找 出 百分数 的 值 。 这 对 响应 


式 页 面 来 说 很 方便 。 


17.4.3 ”实现 媒体 查询 
可 以 使 用 两 种 方式 针对 特定 的 媒体 类 型 定位 CSS。 
第 1 种 方式 是 使 用 link 元 素 的 media 属性 ， 位 于 head 内 。 例 如 : 


<head> 
<link rel="stylesheet" href—="your-styles.css" media="screen" /> 
</head> 
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pe 


第 2 种 方式 是 在 样式 表 中 使 用 @media 规则 。 例 如 : 


谍 只 用 于 打印 的 样式 */ 
| (media prnt { 
会 六 header[role= "banner"] nav, .ad { 


display: none: 
Note 
} 


通过 @media print 规则 可 以 创建 专门 为 打印 浏览 器 里 的 页 面 定 义 的 样式 ， 也 可 以 将 它们 与 为 其 他 
媒体 定义 的 样式 放 在 一 起 。 
此 外 ， 还 有 第 3 种 方式 ， 即 使 用 @import 规则 ， 不 过 一 般 不 建议 使 用 这 种 方法 ， 因 为 它 会 影响 性 能 。 
媒体 查询 增强 了 媒体 类 型 方法 ,允许 根据 特定 的 设备 特性 定位 样式 。 要 调整 网 站 的 呈现 样式 ， 让 
其 适应 不 同 的 屏幕 扩 寸 ， 采 用 媒体 得 询 特别 方便 。 
CSS3 使 用 @media 规则 定义 媒体 查询 ， 简 化 语法 格式 如 下 : 
(@media [only | not]? <media type> [and <expression>|* | <expression> [and <expression>|]*{ 
/CSS 样式 列表 */ 
} 
参数 简单 说 明 如 下 。 
<media type>: 指定 媒体 类 型 。 
<expression>: 指定 媒体 特性 。 放 在 一 对 圆 括号 中 ， 如 (min-width:400px)。 
逻辑 运算 符 ， 如 and〈 逻 辑 与 ) 、not (逻辑 否 ) 、only (兼容 设备 ) 等 。 
媒体 特性 包括 13 种 ， 接 受 单个 的 逻辑 表达 式 作 为 值 ， 或 者 没有 值 。 大 部 分 特性 接受 min- 或 max- 
前 级 ， 用 来 表示 大 于 等 于 或 者 小 于 等 于 的 逻辑 ， 以 此 避免 使 用 大 于 号 (>) 和 小 于 号 〈<) 字符 。 下 面 
列 出 了 可 以 包含 在 媒体 查询 里 的 媒体 特性 。 
width (宽度 ) 。 
height (高 度 ) 。 
device-width (设备 宽度 ) 。 
device-height (设备 高 度 ) 。 
orientation( 方 同 ) 。 
aspect-ratio 〈 高 宽 比 ) 。 
device-aspect-ratio 〈 设 备 高 宽 比 ) 。 
color〈 颜 色 ) 。 
color-index (颜色 数 ) 。 
monochrome ( 单 色 ) 。 
resolution (分 辨 率 ) 。 
scan (扫描 )。 
grid 〈 栅 格 ) 。 
还 有 一 些 非 标准 的 媒体 特性 : 
-Webkit-device-pixel-rati (WebKit 设备 像素 比 ) 。 
-moz-device-pixel-ratio (Mozilla 设备 像素 比 ) 。 
除了 orientation、scan 和 grid 以 外 ， 上 述 属 性 均 可 添加 min- 和 max- 前 级 。min- 前 级 定位 的 是 “大 
于 等 于 ”对 应 值 的 目标 ， 而 max- 前 级 定位 的 则 是 “小 于 等 于 ”对 应 值 的 目标 。 


加 


办 办 办 办 办 办 办 办 办 办 办 加 
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CSS3 媒体 香 询 规范 中 列 出 了 关于 所 有 媒体 特性 的 摘 述 (www.w3.org/TR/css3-mediaqueries/#medial )。 
以 下 是 媒体 查询 的 基本 语法 。 
加 ”指向 外 部 样式 表 的 链接 : 


/下 面 代码 定义 了 如 果 页 面 通过 屏幕 呈现 ， 且 屏幕 宽度 不 超过 480px， 则 加 载 shetland.css 样式 表 
<link rel="stylesheet" type="text/css" media= "screen and (max-device-width: 480px)" href—="shetland.css" /> 


加 ”位 于 样式 表 中 的 媒体 盘 询 : 
@media logic type and (feature: value) { 


人/# 目 标 CSS 样式 规则 写 在 这 里 */ 
} 


对 于 啊 应 式 页 面 ， 大 多 数 情况 下 需要 将 媒体 得 询 放 到 样式 表 中 。 


/# 常 规 样 式 写 在 这 里 。 
每 个 设备 都 能 获取 它们 ， 除 非 被 媒体 查询 中 的 样式 规则 获 盖 局 
body {font: 2009%o/1.3 sans-serif:} 
p {color: green:} 
谍 以 下 针对 不 同 的 设备 进行 定制 */ 
(media (max-width: 600px) { 
谍 匹 配 界面 宽度 小 于 等 于 600px 的 设备 */ 


} 
(media (min-width: 400px) { 

席 匹 配 界面 宽度 大 于 等 于 400px 的 设备 */ 
} 


@media (max-device-width: 800px) { 

谍 匹 配 设备 (不 是 界面 ) 宽 度 小 于 等 于 800px 的 设备 */ 
} 
(media (min-device-width: 600px) { 

谍 匹 配 设备 (不 是 界面 ) 宽 度 大 于 等 于 600px 的 设备 */ 
} 


本 例 设 计 的 媒体 得 询 样式 如 下 : 


/*480-767-only*/ 
(media only screen and (min-width: 30em) and (max-width: 47.937Sem) { 
/# 边 栏 ##/ 
.about {overflow: hidden:;} 
-about Img { 
float: left: 
margin-right: 1Spx:; 
} 


/*600-767-only*/ 

(media only screen and (min-width: 37.Sem) and (max-width: 47.937Sem) { 
/站 边栏 / 
.about {padding-bottom: 1.4em:} 

} 

/*768+*/ 

(Omedia only screen and (min-width: 48em) { 
hl {font-size: 2.2Sem:} 
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SEE 4 
/# 报 头 *#/ 

.masthead {padding-top: 10px:} 
.nav-main {margin-bottom: 0;} 
放 主 要 内 容 */ 


加 7 | .container { 
AN background: url(img/bg.png) repeat-y 65.938% 0; 


Note | padding-bottom: 1.9375em; 
| } 


maimn { 
float: left: 
width: 62.5%; 
} 
main > .post:first-child > hl {margin-top: 0.904em:} 
.post-blurbp { 
font-size: lem: 
line-height: 1.4: 
} 
.post-footer { 
padding-bottom: .7em:; 
padding-top: .7em:; 
} 
.footer p {font-size: 0.688em:} 
.pagination {margin-top: 45px;} 
/站 边栏 #/ 
.sidebar { 
float: right: 
margin-top: 1.87Sem; 
width: 31.25%: 
} 
.about p {font-size: 0.813em;} 
诺 页 肢 */ 
footer[role="contentinfo"| {border-top: 1px solid #cacbcb:} 


} 

谍 --- 结 束 媒体 查询 ----*/ 

最 后 ， 还 需要 在 头 部 区 域 设 置 视 口 ， 即 视觉 区 域 。 

<meta name="viewport" content="width=device-width, mitial-scale=1" /> 

| 这 段 代码 的 重点 是 width=device-width。 有 了 这 条 语句 , 视觉 区 域 的 宽度 会 被 设 成 与 设备 宽度 (对 
，iPhone 来 说 为 320px) 相同 的 值 ， 因 此 在 纵 同 模式 下 该 党 度 的 页面 内 容 会 填充 整个 屏幕。 如 果 不 包含 
”这 一 语句 ， 使 用 媒体 查询 的 min-width 和 maxwidth 特性 将 不 会 得 到 预期 的 结果 。 

| 代码 中 的 initial-scale=1 部 分 对 width 和 device-width 值 没有 影响 ， 但 通常 会 包含 这 一 语句 。 它 将 
”页面 的 默认 缩放 级 别 设 成 了 100%， 换 成 纵 回 模式 也 一 样 。 如 果 不 设置 initial-scale=1， 在 iPhone 中 ， 
”手机 从 纵向 模式 改 为 横向 模式 时 ， 网 页 会 被 放大 ， 从 而 让 布局 与 纵向 模式 一 致 。 


低 提示 : 视觉 区 域 (viewport ) 指 的 是 浏览 器 ( 包括 桌面 浏览 器 和 移动 浏览 器 ) 显示 页 面 的 区 域 。 
它 不 包含 浏览 器 地 址 栏 、 按 钮 等 ， 只 是 浏览 区 域 。 
媒体 查询 的 width 特性 对 应 的 是 视觉 区 域 的 宽度 。 不 过 ，device-width 特性 不 是 ， 它 指 的 
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是 屏幕 的 宽度 .在 移动 设备 (如 iPhone ) 上 , 默认 情况 下 这 两 个 值 通常 不 一 样 . Mobile Safari / 
(iPhone 的 浏览 器 ) 的 视觉 区 域 默 认为 980px， 但 iPhone 的 屏幕 只 有 320px (iPhone 的 


Retina 显示 屏 的 屏幕 分 辩 率 有 640px， 但 它们 是 在 相同 的 空间 挤 入 两 倍 的 像素 ， 因 此 设备 


宽度 仍 为 320px ) 。 


因此 ，iPhone 会 像 设 为 980px 的 桌面 浏览 器 那样 显示 页 面 ， 并 将 页 面 缩小 以 适应 320px ， 
屏幕 宽度 ( 在 纵向 模式 下 ) 。 结果， 当 在 Mobile Safari 中 浏览 大 部 分 为 桌面 浏览 器 建立 的 ， 


网 站 时 ， 会 显示 将 这 些 网 站 缩小 了 的 样子 。 在 横向 模式 下 也 是 这 样 处 理 的 ， 只 不 过 宽度 为 
480px (iPhone5 是 568px ) 。 如 果 不 进 行 放大 ， 页 面 通常 是 难以 阅读 的 (注意 不 同 设备 的 


默认 视觉 区 域 宽度 并 不 相同 ) 。 


17.4.4 组 合 样式 


理解 了 可 伸缩 图 像 、 弹 性 布局 和 媒体 查询 的 知识 之 后 ， 就 可 以 将 它们 组 合 在 一 起 ， 创 建 响应 式 网 
页 。 本 节 将 重点 介绍 页 面 扩 张 或 收缩 时 切换 内 容 的 显示 方式 所 需要 考虑 的 要 点 。 重 要 的 是 了 解 如 何 建 
立 响应 式 网 站 ， 以 及 用 于 实现 响应 式 网 站 的 媒体 查询 类 型 。 完 整 的 样式 需要 读者 参考 示例 源 代码 。 注 


意 ， 并 不 需要 先 做 出 一 个 定 宽 的 设计 ， 再 将 它 转换 成 啊 应 式 的 页 面 。 
【操作 步骤 】 
第 1 步 ， 创 建 内 容 和 HIML。 


在 动手 设计 响应 式 设计 之 前 , 应 该 把 内 容 和 结构 设计 妥当 。 如 果 使 用 临时 占 位 符 设 计 和 构建 网 站 ， | 
当 填 入 真正 的 内 容 以 后 ， 可 能 会 发 现形 式 与 内 容 结 合 得 不 好 。 因 此 ， 应 该 尽 可 能 地 将 内 容 采 集 工作 提 


前 。 具 体操 作 就 不 再 展开 。 


在 head 元 素 中 添加 <meta name= "viewport" content="width=device-width, initialscale=1"/>。 关 于 这 | 


行 代码 的 作用 ， 可 以 参考 17.4.3 节 说 明 。 
第 2 步 ， 遵 循 移动 优先 为 页 面 设计 样式 ， 推 荐 在 设计 网 页 时 也 遵循 这 一 点 。 


首先 为 所 有 的 设备 提供 基准 样式 。 这 同时 也 是 旧版 浏览 器 和 功能 比较 简单 的 设备 显示 的 内 容 。 基 | 


准 样 式 通常 包括 基本 的 文本 样式 〈 字 体 、 颜 色 、 大 小 )、 内 边 距 、 边 框 、 外 边 距 和 背景 〈 视 情况 而 定 )， 
以 及 可 伸缩 图 像 的 样式 。 通 常 ， 在 这 个 阶段 ， 需 要 避免 让 元 素 浮动 或 对 容器 设 定 宽度 ， 因 为 最 小 的 屏 


幕 并 不 够 宽 。 内 容 将 按照 常规 的 文档 流 由 上 到 下 进行 显示 。 


网 站 的 目标 是 在 单列 显示 样式 中 是 清晰 的 、 中 看 的 。 这 样 ， 网 站 对 所 有 的 设备 (无 论 新 旧 ) 都 具 


有 可 访问 性 。 在 不 同 设备 下 ， 外 观 可 能 有 差异 ， 不 过 这 是 在 预期 之 内 的 ， 完 全 可 以 接受 。 


第 3 步 , 从 基本 样式 开始 , 使 用 媒体 查询 逐渐 为 更 大 的 屏幕 或 其 他 媒体 特性 定义 样式 , 如 orientation。 


大 多 数 时 候 ，min-width 和 max-width 媒体 查询 特性 是 最 主要 的 工具 。 


这 是 渐进 增强 在 实战 中 的 应 用 。 处 理 能 力 较 弱 的 (通常 也 是 较 旧 的 ) 设备 和 浏览 器 会 根据 它们 能 ， 
理解 的 CSS 显示 网 站 相对 简单 的 版 本 。 处 理 能 力 较 强 的 设备 和 浏览 器 则 显示 增强 的 版 本 。 所 有 人 都 ， 


能 获取 到 网 页 的 内 容 。 
/# 基 准 样式 


font: 1009%0/1.2 Georgla "Times New Roman", senif: 
margin: 0; 
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} 

*#《/# 参 见 示例 源 代码 煌 
-webkit-box-sizing: border-box: 
-moz-box-sizing: border-box: 
box-sizing: border-box: 


} 

.page { 
margin: 0 auto: 
max-width: 60em; /*960px*/ 

} 

hl { 
font-family: "Lato", sans-serif: 
font-size: 2.25em; /*36px/16px*/ 
font-weight: 300; 

} 


.about h2, .mod h2 {font-slze: .87Sem: /*15Spx/16px*/} 

.logo, .social-sites,.nav-main l1 {text-align: center;} 

访 创 建 可 伸缩 图 像 */ 

.post-photo, .post-photo-full,.about 1mg, .map { 
max-width: 100%: 

} 


第 4 步 ， 应 用 于 所 有 视觉 区 域 〈 小 屏幕 和 大 屏幕 设备 ) 的 基准 样式 示例 效果 如 图 17.2 所 示 。 这 


” 些 样式 规则 与 17.4.3 节 介绍 的 代码 是 类 似 的 ， 只 是 它们 没有 由 媒体 查询 包围 。 注 意 ， 本 例 为 整个 页 面 
， 设 定 了 60em 的 最 大 宽度 〈 通 常 等 价 于 960px)， 并 使 用 auto 外 边 距 让 其 居中 ， 还 让 所 有 的 元 素 使 用 


“boxsizing:border-box;”， 将 大 多 数 图 像 设 置 为 可 伸缩 图 像 。 


| (+)- @ hapiilocelho.. - 昌 上 |‖ 和 | [+) -| 多 hapvilocalho.. - 昌 上 | 后 四 多 生 


首页 ”关于 联系 


页 闯 | 应 用 跳 转 」 技 术 实现 演 


由 于 网 页 传播 的 便捷 狂 ， 从 网 页 向 APP 
导 流 几乎 是 所 有 APP 厂 高 都 会 采用 的 挫 


图 17.2 页 面 结构 默 认 显示 效果 


图 17.2 是 仅 应 用 了 基础 样式 的 页 面 效果 ， 这 个 页 面 在 所 有 的 浏览 器 中 都 是 线性 的 ， 右 侧 的 部 分 
出 现在 左 侧 部 分 的 下 面 ; 也 是 不 支持 媒体 查询 的 旧 浏 贤 器 中 页 面 的 显示 效果 。 在 这 种 状态 下， 依然 保 


持 了 很 蜗 的 可 用 性 。 由 于 没有 设 定 容器 宽度 ， 因 此 在 果 面 浏览 器 中 查看 页 面 时 ， 内 容 的 宽度 会 延伸 至 
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整个 浏览 器 窗口 的 宽度 。 | 
第 5 步 ， 逐 步 完善 布局 ， 使 用 媒体 查询 为 页 面 中 的 每 个 断 点 breakpoint〉 定 义 样式 。 断 点 即 内 
容 须 作 适当 调整 的 宽度 。 在 本 例 中 ， 应 用 基准 样式 规则 后 ， 为 下 列 断 点 创建 了 样式 规则 。 | 


| 
< 全 注意 : 对 于 每 个 最 小 宽度 (没有 对 应 的 最 大 宽度 ) ， 样 式 定位 的 是 所 有 宽度 大 于 该 min-width 值 
的 设备 ， 包 括 台 式 机 及 更 早 的 设备 。 


第 6 步 ， 最 小 宽度 为 20em， 通常 为 320px。 定 位 纵向 模式 下 的 iPhone、iPodtouch、 各 种 Android 
以 及 其 他 移动 电话 。 


(media only screen and (min-width:20em) { 
.nav-man li { 
border-left: 1px solid #c8c8c8; 
display: Inline-block: 
text-align: left: 
} 
.nav-main li:first-child { 
border-left: none: 
} 
.nav-main 
display: Inline-block: 
font-size: lem: 
padding: .Sem .9em .Sem 1.1Sem: 
} 
} 


这 里 针对 视觉 区 域 不 小 于 20em 宽 的 浏览 器 修改 了 主导 航 的 样式 .设计 body 元 素 字体 大 小 为 16px ， 
的 情况 下 ，20em 通常 等 价 于 320px， 因 为 20x16=320。 这 样 ， 链 接 会 出 现在 单独 的 一 行 ， 而 不 是 上 下 | 
堆 盖 ， 如 图 17.3 所 示 。 


Xx 
I eo. -cleus 


图 17.3 小 屏 显 示 效 采 
这 里 没有 将 这 些 放 到 基础 样式 表 中 ,， 因 为 有 的 手机 屏幕 比较 军 ， 可 能 会 让 链接 显得 很 局 促 ， 或 者 
分 两 行 显 示 。 
第 7 步 ， 最 小 宽度 为 30em， 通 常 为 480px， 如 图 17.4 所 示 。 定 位 大 一 些 的 移动 电话 ， 以 及 横 问 
模式 下 的 大 量 320px 设备 (iPhone、iPodtouch 及 某 些 Android 机 型 )。 
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图 17.4 中 屏 显示 效果 


第 8 步 ， 最 小 宽度 介 于 30em (通常 为 480px) 和 47.937Sem (通常 为 767px) 之 间 。 这 适用 于 处 
于 横 癌 模式 的 手机 、 一 些 特定 尺寸 的 平板 电脑 〈 如 Galaxy Tab 和 Kindle Fire)， 以 及 比 通 稼 情况 更 罕 
的 加 面 浏 览 

第 9 步 ， 最 小 宽度 为 48em， 通 常 为 768px。 这 适应 于 常见 宽度 及 更 宽 的 iPad、 其 他 平板 电脑 和 
台式 机 的 浏览 

主导 航 显 示 为 一 行 , 每 个 链接 之 间 由 灰色 的 竖 线 分 隔 。 这 个 样式 会 在 iPhone (以 及 很 多 其 他 手机 》 
中 生效 ， 因 为 它们 在 纵 同 模 式 下 是 320px 宽 。 如 果 硕 望 报头 更 罕 一 些 ， 可 以 让 标识 居 左 ， 社 交 图 标 居 
右 。 将 这 种 样式 用 在 下 一 个 媒体 得 询 中 ， 代 码 如 下 : 


上 # 基 准 样式 状 


/*20em (大 于 等 于 320px) #/ 
(Omedia only screen and (min-width: 20em) { 


} 

/*30em 《大 于 等 于 480px) */ 

(media only screen and (min-width: 30em) { 
.masthead {position: Telative:} 


.social-sites { 
position: absolute: 
right: -3pX: 
top: 41px; 

} 

.logo { 
margin-bottom: 8px; 
text-align: left: 

} 


.nav-main {margin-top: 0;} 
} 
现在 ， 样 式 表 中 有 了 定位 视觉 区 域 至 少 为 30em (通常 为 480px) 的 设备 的 媒体 查询 。 这 样 的 设 

备 包 括 屏 幕 更 大 的 手机 ， 以 及 横 问 模式 下 的 iPhone。 这些 样式 会 再 次 调整 报头 。 

第 10 步 ， 在 更 大 的 视觉 区 域 ， 报 头 宽 度 会 自动 调整 。 
/*#*30em 〈 大 于 等 于 480px) */ 
(Omedia only screen and (min-width: 30em) { 

.post-photo { 

float: left: 
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margin-bottom: 2px:; 
margin-right: 22px: 
max-width: 61.667%: 


.post-footer {clear: left:} 皇 
} 二名 
第 11 步 ， 继 续 在 同一 个 媒体 查询 块 内 添加 样式 ， 让 图 像 向 左 浮动 ， 并 减少 其 max-width， 从 而 让 国信 (25 
更 多 的 文字 可 以 浮动 到 其 右 侧 。 文 本 环绕 在 浮动 图 像 周围 的 断 点 可 能 跟 此 处 用 的 不 同 。 这 取决 于 哪些 ， 
断 点 适合 内 容 和 设计 。 为 适应 更 宽 的 视觉 区 域 ， 一般 不 会 创建 超过 48em 的 断 点 。 也 不 一 定 要 严格 按 
照 设备 视觉 区 域 的 宽度 创建 断 点 。 如 果 一 个 基于 min-width:36em 的 断 点 非常 适合 内 容 ， 就 可 以 大 胆 
地 使 用 这 个 断 点 。 
/# 基 准 样式 #/ 


em (大于 和 二 320px) 
(media only screen and (min-width: 20em) { 


} 
/*#*30em 〈 大 于 等 于 480px) */ 
(Qmedia only screen and (min-width: 30em) { 


} 

/*30em 一 47.9375em (在 480px 和 767px 之 间 ) */ 

(media only screen and (min-width: 30em) and (max-width: 47.937Sem) { 
.about { /*self-clear float*/ 


overflow: hidden: 
} 
-about Img { 

float: left: 

margin-right: 1SpX: 
. 


} 

第 12 步 , 让 “关于 自己 ”图 像 向 左 浮动 。 不过, 这 种 样式 仅 当 视觉 区 域 的 宽度 在 30em 和 47.9375em 
之 间 时 才 和 生效， 超过 这 个 宽度 会 让 布局 变 成 两 列 布局 ,“ 关 于 自己 ”文字 会 再 次 出 现在 图 像 的 下 面 。 
浮动 的 “关于 自己 ”图 像 已 显示 为 其 本 来 的 尺寸 (270px 宽 )， 它 旁边 的 空间 太 小 ， 无 法 很 好 地 容纳 = 
文本 。 这 就 是 之 前 减少 其 max-width 的 原因 。 | 

上 * 基 准 样式 */ 

/*20em (Rr 2 

(media only screen and (min-width: 20em) { 


} 
/*#*30em 〈 大 于 等 于 480px) */ 
(Omedia only screen and (min-width: 30em) { 


/*30em 一 47.937Sem (在 480px 和 767px 之 间 ) */ 
(Qmedla only screen and (min-width: 30em) and (max-width: 47.937Sem) { 
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} 
/*48em 《大 于 等 于 768px) */ 
(QQmedia only screen and (min-width: 48em) { 
.container { 
backeground: url(../img/bg.png) repeat-y 65.9375% 0; 
padding-bottom: 1.875em:; 


} 
maimn { 

float: left: 

width: 62.5%:; /*600px/960px*/ 
.sidebar { 

float: right: 

margin-top: 1.87Sem; 

width: 31.25%; /*300px/960px*/ 
} 


.nav-main {margin-bottom: 0:} 
} 


这 是 最 终 的 媒体 得 询 ， 定 位 至 少 有 48em 宽 的 视觉 区 域 ， 如 图 17.5 所 示 。 该 媒体 得 询 对 大 多 数 桌 


面 浏览 器 来 说 都 为 共 ， 除 非 用 户 让 窗口 变 罕 。 它 同时 也 适用 于 纵 同 模 式 下 的 iPad 及 其 他 一 些 平 板 电脑 。 


< 4 外- [Ee] https /locelhost 8080/ rysite /findex,htrml 
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从 " 广 重 匡 " 向 “有关 量 " 远 进 ， 教 育 江 国 ， 
托 臣 糊 天 的 和希 笋 


图 17.5 大 屏 显 示 效 果 
在 上 更 面 浏览 器 (尽管 要 宽 一 些 ) 中 也 是 类 似 的 。 由 于 宽度 是 用 百分数 定义 的 ， 因 此 主体 内 容 栏 和 


”附注 栏 会 自动 伸展 。 


第 13 步 ， 在 发 布 啊 应 式 页 面 之 前 ， 应 在 移动 设备 和 困 面 浏览 器 上 对 其 测试 一 所 。 构 建 啊 应 式 页 


” 面 时 ， 用户 可 以 放大 或 缩小 桌面 浏览 器 的 窗口 ， 模 拟 不 同 手机 和 平板 电脑 的 视觉 区 域 尺 寸 ， 然后 对 样 
， 式 进行 相应 的 调整 。 这 当然 是 一 种 不 够 精细 的 办 法 ， 但 它 确实 有 助 于 建立 有 效 的 样式 ， 从 而 减少 在 真 
，” 实 设备 上 优化 网 站 的 时 间 。 


第 14 步 ， 对 Retina 及 类 似 显 示 屏 使 用 媒体 查询 。 针 对 高 像素 密度 设备 ， 可 以 使 用 下 面 的 媒体 查询 : 


(media (-o-mlin-devlice-pIXel-ratio: $5/4),(-webkit-min-device-pixel-rati0:1.25),(min-resolution: 120dpl) { 
.your-class { 
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background-1mage:url(sprite-2x.png); 
background-size: 200px 150px; 


! | 
< 入 注意 : background-size 设置 成 了 原始 尺寸 ， 而 不 是 400pxx300px。 这 样 会 让 图 像 缩 小 ， 为 原始 尺 
寸 创建 的 样式 对 2x 版 本 也 有 效 。 


17.4.5 兼容 旧版 IE 


对 于 移动 优先 的 方法 ， 有 一 点 需要 注意 ， 就 是 IE8 及 以 下 的 版 本 不 支持 媒体 查询 。 这 意味 着 这 些 
浏览 器 只 会 呈现 媒体 查询 以 外 的 样式 ， 即 基准 样式 。 目 前 ， 使 用 IE6 和 IE7 的 用 户 已 经 非常 少 了 。 因 ， 
此 ， 真 正 需要 考虑 的 是 IE8， 它 在 全 世界 所 占 的 份额 不 到 9%， 且 这 个 数字 还 在 下 降 (详情 参见 
http://gs.statcounter.com ) 。 

对 于 IE8 (及 更 早 的 版 本 )， 有 3 种 解决 方法 。 

什么 都 不 做 ， 让 网 站 显示 基本 的 版 本 。 

为 它们 单独 创建 一 个 样式 表 ， 让 它们 显示 网 站 最 宽 的 版 本 《不 会 形成 啊 应 式 的 网 页 ) 。 一 种 

做 法 是 复制 一 份 常 规 的 样式 表 ， 将 其 命名 为 old-ie.css 之 类 的 文件 名 。 将 媒体 查询 语句 去 掉 ， 
但 保留 其 中 的 样式 规则 。 在 HIML 中 添加 条 件 注 释 ， 从 而 让 不 同 的 浏览 器 都 能 找到 正确 的 
样式 表 。 

如 果 和 希望 页 面 有 响应 式 的 效果 ， 就 在 页 面 中 引入 respond.min.js。Scott Jehl 创建 了 这 段 简短 

的 代码 ， 它 让 min-width 和 max-width 媒体 查询 对 旧版 正 也 有 效 。 
<!--L1f lt IE 9]> 
<script src="]s/respond.min.]s"></script> 

<![endif|--> 

设置 好 以 后 ，IE8 及 以 下 版 本 会 理解 min-width 和 max-width 媒体 查询 ， 并 呈现 相应 的 样式 。 这 
样 做 就 没有 必要 将 正 样式 表 分 离 出 来 。script 元 素 外 围 的 条 件 注释 是 可 选 的 ， 不 过 如 果 包 含 ， 就 只 有 
IE8 及 以 下 版 本 会 加 载 respond.min.js， 它 让 IE8 用 户 也 能 看 到 网 站 的 完整 布局 。 


个 提示 : 可 以 访问 https://github.com/scottjehl/Respond， 下 载 Respond.js。 下 载 到 计算 机 后 ， 打 开 该 
ZIP 文件 ， 然 后 将 respond.min.js 复制 到 网 站 中 。 
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本 章 将 介绍 如 何 设计 一 个 预订 酒店 的 手机 应 用 网 站 。 该 网 站 以 Bootstrap 框架 为 技术 基 
础 ， 页 面 设 计 简洁 、 明 亮 ， 功 能 以 “ 微 ” 为 核 导 ， 为 浏览 者 提供 一 个 迷你 、 简 单 、 时 尚 的 设 


计 风 格 ， 与 Bootstrap 框架 风格 完美 融和 ， 非 常 适合 移动 应 用 和 推广 。 


【 学 习 重 点 】 

W|I 设计 符合 移动 设备 使 用 的 页 面 。 

WD 能 够 根据 Bootstrap 框架 自 定义 样式 。 
| 事 担 高 平 化 设计 风格 的 基本 方法 。 


与 第 17 章 案例 相 比 ， 本 章 案例 相对 复杂 ， 在 开始 设计 之 前 ， 先 来 理 清 一 下 设计 思路 ， 下 面 仅 做 ， 


第 18 章 ， 灶 例 开 发 : 酒店 预订 微 信 Wap 网 站 


18.1] 设计 思路 


简单 介绍 。 

18.1.1 内 容 / 
网 站 涉及 的 内 容 可 能 很 多 ， 单 从 网 页 设计 的 角度 看 ， 内 容 主 要 包括 图 片 和 文字 。 本 例 素材 具体 存 

放 文 件 夹 说 明 如 下 。 | 
Images: 图 片 等 多 媒体 素材 。 | 


办 办 欠 多 多 的 


styles: 样式 表 文 件 。 

Scripts: JavaScript 脚本 文件 。 

Pictures: 宣传 的 图 片 。 

Member: 后 台 文 持 文件 ， 本 章 暂 不 介绍 。 

help: 帮助 文件 。 

dialog: jQuery 插件 文件 ， 模 态 对 话 框 插件 。 
calendar: 日 历 插件 。 


本 例 所 需要 的 素材 不 是 很 多 ， 但 是 涉及 的 文件 比较 多 。 


18.1.2 
本 例 主要 包含 下 面 几 个 文件 ， 人 简单 说 明 如 下 。 


加 网 网 加 加 加 鲍 辐 加 网 名 名 


结构 


index.html: 首页 。 

Activitys.html: 最 新 活动 页 面 。 

CityList.html: 城市 列表 页 面 。 

Giftaspx.html: 礼品 页 模板 ， 供 后 台 参 考 使 用 。 

GiftListhtml: 礼品 商城 。 

Hotel.aspx.html: 预订 酒店 ， 选 择 房 型 模板 ， 供 后 台 参 考 使 用 。 
Hotel.aspxcheckInDate.html: 房型 和 日 期 选择 页 面 。 
HotelInfo.aspx.html: 酒店 信息 介绍 模板 ， 供 后 台 参 考 使 用 。 
HotelList.aspxcheckInDate.html: 所 选 城市 的 相关 酒店 信息 列表 页 面 。 
HotelReview.aspx.html: 用 户 评价 页 面 。 

login.html: 用 户 登 录 页 面 。 

News.aspx.html: 酒店 新 闻 页 面 。 


结构 不 仅仅 包含 文件 ， 更 多 涉及 页 面 内 容 ,根据 内 容 搭建 页 面 结构 ， 在 下 面 各 节 中 会 逐一 介绍 每 


个 页 面 的 结构 框架 。 
18.1.3 
下 面 使 用 Opera Mobile Emulator 来 预览 一 下 网 站 整体 效果 ， 以 便 在 分 页 设计 时 有 一 个 整体 把 握 。 


效果 
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首先 ， 打 开 index.html 页 面 ， 显 示 效 果 如 图 18.1 所 示 。 

首页 以 扁平 化 进行 设计 ， 包 含 6 个 导航 图 标 色 块 ， 单 击 第 一 个 图 标 色 块 “预订 酒店 ”， 进入 “ 选 
择 城市 ”页 面 ， 在 该 页 面 选 择 要 入 住 的 酒店 ， 页 面 效 果 如 图 18.2 所 示 。 

在 首页 单 击 “最 新 活动 ”图 标 色 块 ， 进 入 “最 新 活动 ”页 面 ， 在 该 页 面 显示 酒店 促销 活动 的 相关 
言 息 ， 如 图 18.3 所 示 。 


"DEE s 8 角 。 最 新 活动 


国 ”选择 城市 : ”桂林 


(D 入 住 日 期 : 2017-04-11 


(D” 离 店 日 期 : ”2017-04-12 


做 幸运 之 神 ， 享 受 0 元 入 住 ( 2016-04-08 ) 


附近 酒店 


_ 也 间作 录 | ae gee | 电脑 版 


酒店 预订 | 我 的 订单 | 我 的 格子 向 2012-2017 

| ”图 18.1 首页 页 面 设计 效果 图 18.2 选择 要 入 住 的 酒店 效果 ”图 18.3 “最 新 活动 ”页 面 效果 
在 首页 单 击 “ 我 的 订单 ”图 标 色 块 ， 可 以 查看 个 人 订单 信息 ， 如 果 没 有 登录 ， 则 显示 登录 表单 ， 
如 图 18.4 所 示 。 


在 首页 单 击 “ 我 的 格子 ”图 标 色 块 ， 进 入 “个 人 信息 中 心 ” 页 面 ， 如 果 没 有 登录 ， 则 显示 登录 表 
单 。 在 首页 单 击 “礼品 商城 ”图 标 色 块 ， 进 入 “礼品 商城 ”页 面 ， 如 图 18.5 所 示 。 

在 首页 单 击 “帮助 咨询 ”图 标 色 块 ， 将 进入 “帮助 咨询 ”页 面 ， 可 咨询 相关 帮助 信息 ， 如 图 18.6 
所 示 。 


| 请 输入 手机 号 /身份 证 /会 员 卡 号 

| 默认 密码 为 证 件 号 后 4 位 

了 记 住 卫 号 京 记 槛 码 ? pq 帮 可 以 咨询 我 们 的 狂 信 防 -( 

| , , MO0: 人 sm 

| i 证 和 做 -人 

萨摩 充电 宝 过 海 塞 尔 耳塞 MX80 外 

还 没 账 号 ? 立即 免费 注册 9600 积分 7600 积分 

或 者 使 用 合作 账号 一 键 登录 : 中 4h 保温 杯 木 酝 绵 窗 杯 

| CBOO - S000s 

“四 @ 

_ 立即 登录 | 免费 注册 | 电脑 | 要 : 
| 格 i 2012-2017 
| 了 18.4 ”登录 表单 页 面 18.5 “礼品 商城 ”页 面 效 果 18.6 “帮助 咨询 ”页 面 效果 
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18.2 设计 首页 


首页 是 一 个 简单 的 导航 列表 。 
【操作 步骤 】 
第 1 步 ， 打 开 index.html 文件 ， 首 先 在 头 部 区 域 导入 框架 文件 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="viewport" content="width=device-width, nitial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> 
<meta content="yes" name="apple-mobile-web-app-capable"> 
<link href—="styles/bootstrap.min.css" rel="stylesheet"> 

<link href—"styles/bootstrap-responsive.css" rel="stylesheet"> 
<link href—"styles/NewGlobal.css" rel="stylesheet"> 

<script src="Scripts/Jquery-1.7.2.min.]s"></script> 

<script src="Scripts/bootstrap.min.]s"></script> 

</head> 


<div class="container"> 
<div class="header"> <1img src="Images/logo.png" style="height: 40px; margin: 10px Opx Opx 15px"> </div> 
<div style="padding:0 Spx 0 0;"> 

</div> 


其 包含 两 部 分 : 
第 1 行为 标题 栏 ， 显 示 网 站 Logo， 本 例 以 一 张大 图 代 谷 显示， 效果 如 图 18.7 所 示 。 


DES Ri 
图 18.7 设计 首页 标题 栏 效果 
大 图 为 PNG 格式 ， 鱼 空白 色 文字 ， 然 后 使 用 CSS 设计 标题 栏 背景 色 为 绿色 。 


.header { 
background:#6ac134; 
height: 60px: 
position: relative; 
width: 100%: 

} 


第 2 行为 导航 列表 结构 , 使 用 3 个 <ul class="unstyled defaultlist pt20"> 标 签 堆 登 显示 , 每 个 列表 框 


第 2 步 ， 设 计 导 航 列 表 结 构 ， 使 用 <div class="container"> 布 局 容器 。 
包含 两 个 列表 项 目 ， 水 平 布 局 ， 效 果 如 图 18.8 所 示 。 / 
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<div style="padding:0 Spx 0 0;"> 
<ul class="unstyled defaultlist pt20"> 
<l1 class="f"> <a href—="CityList.html"> 
<h3> 预 订 酒 店 </h3> 
<figure class="]Jp icon"></figure> 
</a> < 中 > 
<]i class="h"> <a hre 舍 "Activlitys.html"> 
<h3> 最 新 活动 </h3> 
<figure class="]d icon"></figure> 
</a> </l> 
</ul> 
<ul class="unstyled defaultlist">... </ul> 
<ul class="unstyled defaultlist">...</ul> 
</div> 
每 个 导航 图 标 使 用 <a> 标 签 包 里 ， 里 面包 含 文字 和 字体 图 标 ， 然 后 在 <l 这 列表 项 目 上 面 定义 不 同 
皮肤 颜色 ，<l> 标 签 浮动 显示 ， 实 现 一 行 两 列 排 版 布局 。 
第 3 步 ， 在 页 面 底部 插入 <div class="footer"> 包 含 框 ， 定 义 网 站 版 权 信息 区 域 ， 结 构 如 下 ， 效 果 
如 图 18.9 所 示 。 


<div class="footer"> 
<div class="gezifooter"> <a hre 人 ="#" class="ui-link"> 酒 店 预订 </a> <font color="#878787">|</font> <a hre 仁 


"#" class="ui-link"> 我 的 订单 </a> <font color="#878787">|</font> <a hre 伍 "#" class="ui-link"> 我 的 格子 </a> </div> 


<div class="gezifooter"> 
<p style="color:#bbb;"> 格 子 微 酒店 连锁 &copy; 版 权 所 有 2012-2017</p> 
</div> 
</div> 


酒店 预订 | 找 的 订单 | 我 的 格子 


图 18.8 设计 首页 导航 图 标 效 果 图 18.9 设计 页 脚 信息 显示 效果 
18.3 设计 登录 页 


打开 login.html 页 面 ， 该 页 面包 含 3 部 分 : 顶部 标题 栏 、 底 部 脚注 栏 和 中 间 的 登录 表单 结构 。 
标题 栏 采 用 标准 的 移动 设备 布局 样式 , 左右 为 导航 图 标 , 中 间 为 标题 文字 , 效果 如 图 18.10 所 示 。 


<div class="header"> <a href="index.html" class="home"> <span class="header-icon header-1con-home"></span> 
<span class"header-name"> 主 页 </span> </a> 
<div class="title" 1d="titleString"> 登 录 </div> 
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<a href="Javascript:history.go(-1);" class="back"> <span class="header-icon header-icon-return"></span> | 


<span class="header-name"> 返 回 </span> </a> 
</div> 


图 18.10 ”标题 栏 设 计 效 果 


标题 栏 图 标 以 文字 图 标 形式 设计 ， 这 样 方便 与 文字 定义 相同 的 颜色 ， 为 <div class="header"> 设 计 
绿色 背景 ， 营 造 一 种 扁平 设计 风格 。 
中 间 位 置 显 示 表 单 结 构 ， 代 码 如 下 : 
<div class="container width80 pt20"> 


<form name="aspnetForm" method="post" action="login.aspx?ReturnUrl=%2fMember%2fDefault.aspx"” 


1d="aspnetForm" class="form-horizontal"> 
<div> 
<Input type="hidden" name=" EVENTTARGET"1d=" EVENTTARGET" value=""> 


<Inpnut type="hidden" name=" EVENTARGUMENT"1i1d=" EVENTARGUMENT" value=""> 
<Inpnut type="hidden" name=" VIEWSTATE"i1d=" VIEWSTATE" value="1"> 
</div> 
<div> 
"JwEWBQLZmqilDgLJ4fq4BwL90KKTCAKqkJ77CQKI+JrmBdPJophKZ3jeAaKMtEkXL+P80ASc"> 
</div> 
<div class="control-group"> 


<input type="hidden" name=" EVENTVALIDATION" id=" EVENTVALIDATION" value= 


<Input name="ctl00$ContentPlaceHolder] $txtUserName" type="text" 1d="ctl00 ContentPlaceHolderl | 
txtUserName" class="input width100 " style="background: none repeat scroll 0 0 #F9F9F9:;padding: 8px Opx 8px 4px"” 


placeholder=" 请 输入 手机 号 /身份 证 /会 员 卡 号 "> 
</div> 
<div class="control-group"> 


<input name="ctl00$ContentPlaceHolder]l $txtPassword" type="password" id="ctl00 ContentPlaceHolderl 


txtPassword" class="wldth100 nput" style="background: none repeat scroll 0 0 #FE9F9F9:padding: 8px Opx 8px 4px" 
placeholder=" 默 认 密 码 为 证 件 号 后 4 位 "> 
</div> 
<div class="control-group"> 
<label class="checkbox fl"> 


<Input name="ctl00$ContentPlaceHolderl $cbSaveCookie" type="checkbox" 1d="ctl00 | 


ContentPlaceHolder] cbSaveCookie" style="float: none:;margin-left: Opx:"> 
记 住 账号 </label> 
<a class="fr" hre 伟 "GetPassword.aspx"> 忘 记 密 码 ? </a> </div> 
<div class="control-group"> <span class="red"></span> </div> 
<div class="control-group"> 


<button onclick=" doPostBack('ctl00$ContentPlaceHolderl$btnOK,,")" 1d="ctl00 ContentPlaceHolderl 


btnOK" class="btn-large green button width100"> 立 即 登 录 </button> 
</div> 


<div class="control-group'> 还 没 账号 ? <a hre 仁 "Reg.aspx(@ReturnUrl= 252fMember 252fDefault.aspx"” 


id="ctl00 _ ContentPlaceHolderl RegBtn"> 立 即 免 费 注册 </a> </div> 
<div class="control-group"> 或 者 使 用 合作 账号 一 键 登 录 : <br> 


<a class="servIco ico qq" href="qlogin.aspx"></a> <a class="servIco ico sina" href="defaulthtm"> | 


</a> </div> 
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</form> 
</div> 
在 表单 中 通过 <input type="hidden"> 隐 藏 控件 ， 传 递 用 户 附加 信息 ， 借 助 Bootstrap 表单 控件 美化 效 


果 ， 如 图 18.11 所 示 。 提 区 按钮 使 用 Bootstrap 的 风格 设计 块 状 显示 ， 在 整个 页 面 中 显得 很 大 气 、 可 触 。 


<button class="btn-large green button width100"> 立 即 登 录 </button> 


请 袖 | nu 上 /会 只 十 

默认 密码 为 证 件 亏 后 4 位 

口 记 住 账号 忘记 密码 ? 
立即 登录 

还 没 账号 9 立即 免费 注册 


或 者 使 用 合作 账 弓 一 键 痘 录 : 


图 18.11 登录 表单 设计 效果 
18.4 选择 城市 


打开 CityList.html 页 面 ， 该 页 面 提 供 一 个 交互 界面 ， 供 用 户 选择 要 入 住 酒店 所 在 的 城市 。 
该 页 面 标题 栏 和 脚注 栏 与 其 他 页 面 设计 相同 ,在 此 不 再 重复 ， 下 面 主 要 设计 交互 表单 界面 。 表 单 


”结构 如 下 : 


<div class="container width90 pt20"> 
<form class="form-horizontal" action="HotelList.aspx" method="get" 1d="form]1"> 
<ul class="search-group unstyled"> 
<l1> 
<div class="coupon-nav coupon-nav-style"> <span class="search-lcon location-1con"></span> 


，” <span class="coupon-label"> 选 择 城市 : </span> <span class="coupon-input"> <span style="font-size: 16px: line-height: 
， 35px;" id="cityname"> 全 部 城市 </span></span> </div> 


<div class="citybox"> <span cityid="0"> 全 部 </span> <span cityid="771"> 南 宁 </span> <span 


| cityid="773"> 桂 林 </span> <span cityid="371"> 郑 州 </span> </div> 


</l> 
<l1> 
<div class="coupon-nav coupon-nav-style"> <span class="search-icon time-icon"></span> 


| <span class="coupon-label"> 入 住 日 期 : </span> <span class="coupon-input"><a id="datestart"” class="datebox" 
href="jJavascript:vo1d(0)"><span class="ui-i1con-down"></span></a></span> </div> 


<div 1d="dp start" class="none"> 
<div 1d="datepicker start"></div> 
</div> 
</li> 
<]1> 
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<div class="coupon-nav coupon-nav-style"> <span class="search-icon time-1con"></span> <span 
class="coupon-label"> 离 店 日 期 : </span> <span class="coupon-input"><a id="dateend" class="datebox" hre 人 = 
"Javascript:vo1d(0)"><span class="ul-lcon-down'"></Span></a></Span> </div> 
<div 1d="dp_end" class="none"> 
<div 1d="datepicker end"></div> 
</div> 
</l> 
</ul> 
<Inpnut 1d="checkInDate" name="checkInDate" value="2017-04-11" type="hidden"> 
<Input 1d="checkOutDate" name="checkOutDate" value="2017-04-12" type="hidden"> 
<Input 1d="cityID" name="cityID" value="0" type="hidden"> <div class="control-group tc"> 
<button class="btn-large green button width80" style="padding-left:0px:padding-right: Opx:;" ID= 
"btnOKR" > 
<A href—="HotelList.aspxcheckInDate.html"> 立 即 查 找 </A> 
</button> 
</div> 
<div class="control-group tc"> <a href="NearHotel.aspx" style="padding-left:0px:padding-right: Opx:" 
class="btn-large green button width80"> 附 近 酒 店 </a> </div> 
</form> 
</div> 


为 了 方便 JavaScript 脚本 控制 ， 整 个 页 面 没有 使 用 传统 的 表单 控件 来 设计 ， 而 是 通过 JavaScript+CSS 


来 设计 ， 界 面 效 果 如 图 18.12 所 示 。 
点 击 “ 选 择 城市 ”选项 ， 将 会 滑 出 城市 列表 面板 ， 如 图 18.13 所 示 ， 用 户 可 以 选择 目标 城市 。 


上 | 选择 城市: 全 部 城市 
(上 ”A 入住 昌 期 : 2017-04-11 
(中 、 高 店 日 期 : 2017-04-12 
wd ca 
全 部 南宁 桂林 
图 18.12 查找 酒店 界面 图 18.13 选择 城市 


在 城市 列表 面板 中 选择 一 个 城市 ， 然 后 在 下 面 选 项 中 选择 入 住 日 期 ， 效 果 如 图 18.14 所 示 。 
四 团 “ 选 择 城市 : 郑州 


(中 ”入 住 日 期 : 2017-04-11 


<< 2017 年 04 月 >> 


3 4 5 6 7 8 9 
10” 加 硬 12 13 14 15 16 
ug 18 19 20 21 pe 23 
和 于 引流 

(D 高 店 日 期 : 2017-04-12 


图 18.14 选择 日 期 
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i 


active'); 


(sss 网页 补 计 从 入 门 到 精通 《 柚 梨 精 编 版 ) 


用 户 选 择 的 日 期 通过 JavaScript 显示 在 界面 中 ， 同 时 赋值 给 隐藏 控件 ， 以 便 传递 给 服务 器 进行 处 理 。 
交互 控制 的 JavaScript 代码 如 下 : 


<script type="text/Javascript"> 
(function ($, undefined) { 
$(function ( {//dom ready 
var open = null, today = new Date(); 
var beginday = '2017-04-11': 
var endday = '2017-04-12'; 
// 设 置 开 始 时 间 为 今天 
$('#datestart").html(beginday + '<span class="ul-1con-down"></span>"); 
// 设 置 结束 时 间 
$('#dateend').html(endday 十 
'<span class="uil-1con-down"></span>"); 
$('#datepicker start").calendar({// 初 始 化 开始 时 间 的 datepicker 
date: $('#datestart').text(, // 设 置 初始 日 期 为 文本 内 容 
/设置 最 小 日 期 为 当月 第 一 天 ， 既 上 一 月 的 不 能 选 
minDate: new Date(today.getFullYear(), today.getMonth(, today.getDate()), 
/设置 最 大 日 期 为 结束 日 期 ， 结 束 日 期 以 后 的 天 不 能 选 
maxDate: new Date(today.getFullYear(), today.get Month(), today.getDate() + 25), 
select: function (e, date, dateStr) {// 当 选中 某 个 日 期 时 
var dayl = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1); 
// 将 结束 时 间 的 datepicker 的 最 小 日 期 设 成 所 选 日 期 
$('#datepicker end').calendar('minDate', dayl).calendar(refresh ); 
$(#dp_start').toggle(); 
// 把 所 选 日 期 赋值 给 文本 
$('#datestart").html(dateStr + '<span class="ui-icon-down"></span>'").removeClass(‘ui-state- 


$('#checkInDate').val(dateStr); 
$('#dateend').html($.calendar.formatDate(day1) + '<span class="ui-1con-down"></span>'"). 


| removeClass('ul-state-active'); 


$('#checkOutDate').val($.calendar.formatDate(day]1)): 


} 

} 

$('#datepicker end').calendar({ // 初 始 化 结束 时 间 的 datepicker 
date: $('#dateend').text(), /设置 初始 日 期 为 文本 内 容 


minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1), 
maxDate: new Date(today.getFullYear(), today.get Month(), today.getDate() + 16), 


select: function (e, date, dateStr) { // 当 选中 某 个 日 期 时 
// 收 起 datepicker 
open = null; 
$(#dp_end').toggle(); 
/把 所 选 日 期 赋值 给 文本 
| $('#dateend').html(dateStr + '<span class="ui-1con-down"></span>').removeClass('ul-state- 
active'); 
$('#checkOutDate').val(dateStr); 
} 
3 
$('#datestart'").click(function (e) { // 展 开 或 收 起 日 期 


$(‘#datestart").removeClass('ui-state-active'); 
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SS 
var type = $(this).addClass('ul-state-active').1s('#datestart') ? 'start': 'end'; 
$(#dp_start').toggle(); 

}).highlight('ui-state-hover'); 

$('#cityname'").click(function (e) { 
$('.citybox').toggle():; 


»); 
$('.citybox span').click(function (e) { 


$('#cityname').text($(this).text()); 
$('.citybox').toggle(); 


$('#cityID'").val($(this).attr("cityId"));: 
)); 


$('#dateend").click(function (e) { // 展 开 或 收 起 日 期 
$('#dateend').removeClass('ul-state-active'); 
var type = $(this).addClass('ul-state-active').1s('#dateend') ? 'start': 'end'; 
$('#dp_end').toggle(); 
}).highlight('ui-state-hover'"); 


18.5 选择 酒店 


当 用 户 在 “选择 城市 ”页 面 提交 表单 之 后 ， 将 会 跳 转 到 HotelListaspx 页 面 ， 该 页 面 为 后 台 服 务 ， 


器 处 理 文 件 ， 该 文件 将 动态 显示 所 在 城市 相关 酒店 信息 列表 ， 本 例 模 拟 效果 如 图 18.15 所 示 。 


和 预订 才 导航 


四 文采 
南宁 明秀 店 
和 二 地址 ; 南宁 明秀 西 路 18-8 号 
. - | 南宁 第 ) \ 中 学 羌 
一 评分 “50 ( 267 人 下 评 
编 栅 订 才 导航 BY 实录 
< 南宁 金 湖广 场 店 
地址 : 南宁 市 金 湖广 场 金 汪 
支 路 中 国 郎 政 画 


评分 : 4.6( 276 人 已 评 ) 


图 18.15 所 选 城市 的 酒店 列表 
页 面 基本 结构 如 下 (HotelList.aspxcheckInDate.html): 
<div class="container hotellistbg"> 
<ul class="unstyled hotellist"> 


<]1> <a href="Hotel.aspxcheckInDate.html"> <img class="hotelimg fl" sre="Pictures/1/$.jpg"> 
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<div class="inline"> 
<h3> 南 宁 秀 灵 店 </h3> 
<p> 地 址 : 秀 灵 路 55 号 〈 出 入 境 管理 局 旁 ) </p> 
<p> 评 分 : 4.6 〈1200 人 已 评 ) </p> 
</div> 
<div class="clear"></div> 
</a> 
<ul class="unstyled"> 
<li><a href="Hotel.aspx(@1d=5" class="order"> 预 订 </a></li> 
<li><a href="Hotelmap.aspx(@1d=5" class="gps"> 导 航 </a></li> 
<li><a href="Hotelinfo.aspx(@id=5" class="reality"> 实 景 </a></li> 
</ul> 


在 该 页 面 中 可 以 选择 特定 酒店 ,并 通过 每 个 酒店 底部 的 3 个 按钮 预订 酒店 、 查 看 酒店 信息 ,或 者 


进行 导航 等 。 


186 预订 酒 让 


当 用 户 在 酒店 列表 页 面 选择 一 个 酒店 之 后 ， 将 会 跳 转 到 Hotel.aspx 页 面 ， 该 页 面 为 后 台 服 务 器 处 


” 理 文件 ， 该 文件 将 动态 显示 用 户 可 选择 的 房型 信息 。 本 例 模拟 效果 如 图 18.16 所 示 。 


睛 秀 灵 路 55 号 ( 出 入 境 管理 局 旁 ) 


04 月 11 日 - 04 月 12 日 


¥ 134 起 及 i 


图 18.16 选择 房型 
页 面 基本 结构 如 下 (Hotel.aspx.html): 


<div class="container"> 
<ul class="unstyled hotel-bar"> 
<]i class="first"> <a hre 人 ="#BookRoom" class="active"> 房 型 </a> </li> 
<]i><a href="HotelInfo.aspx.html"> 简 介 </a></li> 
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<]i><a hre 伍 "#"> 地 图 </a></li> 
<li><a href="Hotelreview.aspx.html"> 评 论 </a></li> 
</ul> 
<div 1d="BookRoom" class="tab-pane active fade 1n"> 
<div class="detail-address-bar"> <Img alt="" src="i1mages/location icon.png"> 
<p> 秀 灵 路 5$ 号 〈 出 入 境 管 理 局 劳 ) </p> 
</div> 
<div 1d="datetab" class="detail-time-bar"> <1i1mg alt="" src="i1mages/calendar.pne"> 
<p>04 月 11 日 -04 月 12 日 </p> 
<span class="icon-down"></span> </div> 
<form action="hotel.aspx" method="get"> 
<div 1d="datebox" class="section none"> 
<div class="filter clearfix"> 
<p style="margin-bottom: 10px:display: block:"> 入 住 : <a 1d="datestart" hre 传 "javascript: 
vo1d(0)"><span class="ui-1con-down"></span></a></p> 


<br> 
<p> 离开 : <a id="dateend" hre 传 "javascript:volid(0)"><span class="ui-icon-down"> ] 
</span></a></p> 
</div> 
<div 1d="datepicker wrap"> 
<div 1d="dp start"> 
<p> 入 住 时 间 : </p> 
<div 1d="datepicker start"></div> 
</div> 
<div 1d="dp end"> 
<p> 离 开 时 间 : </p> 
<div 1d="datepicker end"></div> 
</div> 
</div> 
<div class="result"> 
<input type="submit" class="btn" value=" 确 定 修改 "> 
<span class="btn" 1d="datecancel"> 取 消 </span> </div> 
<input 1d="1d" name="1d" type="hidden" value="5"> 
<Inpnut 1d="CheckInDate" name="CheckInDate" type="hidden" value="2017-4-11"> 
<Inpnut 1d="CheckOutDate" name="CheckOutDate" type="hidden" value="2017-4-12"> 
</div> 
</form> 
<ul class="unstyled roomlist"> 
li 


<div class="roomtitle"> 
<div class="roomname"> 上 下 铺 </div> 


<div class="fi"> <em class="orange roomprice"> ¥134 起 </em> <a href~'login.aspx(@page= 


_ 2Forderhotel.aspx&hotelid=5&roomtype=5&checkInDate=2017-4-11&checkOutDate=2017-4-12”title=" 并 即 预 订 ' 
class='btn btn-success iframe'> 预 订 </a> </div> 
</div> 
<a class="fl roompic" bigsrc="Pictures/20130411152105m.jpg"> <imeg title=" 秀 灵 上 下 铺 " 
src="Pictures/20130411152105s.jpg"></a> </l> 


</ul> 


<div style="transform-origin: Opx Opx Opx; opaclty: 1; transform: scale(1, 1);" class="hotel-prompt"> 


<span class="hotel-prompt-title" id="digxx"> 特 别提 示 </span> 
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<p> 最 早 入 住 时 间 为 中 午 12:00， 如 需 提前 入 住 请 联系 客服 。</p> 
</div> 
</div> 
</div> 
在 该 页 面 顶部 显示 一 行 次 级 导航 面板 ， 分 别 为 房型 、 简 介 、 地 图 和 评论 。 当 点 击 “ 简 介 ” 选 项 ， 将 会 
打开 HotelInfo.aspx 页 面 ， 该 页 面 将 会 动态 显示 对 应 酒店 的 详细 介绍 。 本 例 模板 页 面 效果 如 图 18.17 所 示 。 


图 18.17 查看 酒店 信息 
页 面 结构 如 下 (HotelInfo.aspx.html): 


<div class="container"> 
<ul class="unstyled hotel-bar"> 
<li class="first"> <a hre 人 ="Hotel.aspx.html"> 房 型 </a> </li> 
<li><a href="HotelInfo.aspx" class="active"> 简 介 </a></li> 
<]i><a hre 伍 "#"> 地 图 </a></li> 
<]i><a href="HotelReview.aspx.HTML"> 评 论 </a></li> 
</ul> 
<div class="hotel-prompt "> <span class="hotel-prompt-title"> 酒 店 图 片 </span> 
<div 1d="slider" style="margin-top: 10px:"> 
<div> <img src="Pictures/20121231113309m.jpg"> 
<p> 酒 店 外 观 </p> 
</div> 
<div> <Img src="Pictures/20121231113406m.jpg"> 
<p> 大 堂 </p> 
</div> 
<div> <img src="Pictures/20121231113520m.jpg"> 
<p> 阳 光大 床 房 </p> 
</div> 
</div> 
</div> 
<div id="hotelinfo" class="hotel-prompt "> <span class="hotel-prompt-title"> 酒 店 简 介 </span> 
<p> 格 子 微 酒 店 南宁 秀 灵 路 店 位 于 广西 最 著名 大 学 广西 大 学 东 门 劳 ,紧邻 名 江 边 , 周边 超市 、 餐 饮 、 


”银行 等 配套 设施 完善 ， 出 行 便利 。 酒店 倡导 低 碳 环保 ， 客 房 内 配 有 24 小 时 热 水 、wi 网 络 、 电 视 等 设施 ， 客 房 
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虽 小 ， 设 施 齐全 。 酒 店 服务 周到 细致 ， 是 您 出 行 的 不 错 选择 。 酒店 开业 时 间 2012 年 12 月 。</p> 
<p> 地 址 : 秀 灵 路 55 号 〈 出 入 境 管理 局 旁 ) </p> | 
<p> 电 话 : 0771-3391588</p> | 

</div> | 


Si / 


如 果 在 页 面 顶 部 点 击 “ 评 论 ” 选 项 ， 可 以 打开 评论 页 面 HotelReview.aspx， 了 解 网 友 对 该 酒店 的 
评价 信息 列表 ， 效 果 如 图 18.18 所 示 。 ote 


这 次 去 这 个 房间 有 点 姻 际 ， 住 
了 这 么 多 次 只 有 这 个 有 烟 味 ~ | 
除了 烟 味 都 是 一 如 既往 的 好 ! 


2017-04-11 


好 -~ 


2017-04-10 


一 如 晓 往 的 不 错 ~ | 
图 18.18 查看 用 户 评价 信息 
打开 本 例 HotelReview.aspx.html 模板 页 面 ， 该 页 面 的 基本 结构 如 下 : | 


<div class="container"> | 
<ul class="unstyled hotel-bar"> 

<li class="first"> <a href—="Hotel.aspx.HTML"> 房 型 </a> </li> 

<li><a hre 仁 "HotelInfo.aspx.html"> 简 介 </a></li> ] 

| 


<]i><a hre 伍 "#"> 地 图 </a></li> 
<li><a href—="HotelReview.aspx.html" class="active"> 评 论 </a></li> | 
</ul> ] 


<div class="hotel-comment-list"> 
<div class="hotel-user-comment"> <span class="hotel-user"><1mg width="32" height="32" src="Pictures/2/ 
user01.png"> 会 员 李 * 清 :</span> | 
<div class="hotel-user-comment-cotent"> 
<p> 这 次 去 这 个 房间 有 点 烟 味 , 住 了 这 么 多 次 只 有 这 个 有 烟 味 ~ 除了 烟 味 都 是 一 如 既往 的 ” 
好 ! </p> | 
<span>2017-04-11</span> </div> 
</div> 
</div> 
</div> 


上 面 重点 介绍 了 酒店 预订 的 完整 流程 ， 从 选择 城市 ， 到 选择 酒店 ， 再 到 选择 房型 、 查 看 酒店 信息 ， 
和 用 户 评论 等 ， 本 例 网 站 还 包含 其 他 辅助 页 面 ， 这 些 页 面 设计 风格 相近 ， 结 构 大 致 相同 ， 这 里 不 再 详 ， 
细 展 开 。 
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